Posted By

COBOLdinosaur on 06/06/13

Tagged

Versions (?)

Last Edited at 06/06/13 05:05am

Statistics

Viewed 1062 times

Favorited by 0 user(s)

Related snippets

Curtain Effect Using Multiple Background Images

/ Published in: CSS

Each image is positioned, dimensioned, and repeated according to the comma separated values in the other background properties. The images in the list are layered front to back in the same order they are listed in the rule declaration. If a background color is specified it will be the bottom layer.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

#curtains {
                transition-property:background-position;
                transition-duration:2s;
                transition-timing-function:ease-out;
                border:1px solid blue;
                text-align:center;
                font-size:200%;
                font-weight:bold;
                color:black;
                width: 400px;
                height: 300px;
                margin:auto;
                background: url(../images/curtains-left.jpg) 0px 0px no-repeat, 
                url(../images/curtains-right.jpg) right top no-repeat, 
                url(../images/sunrise.jpg) left top repeat-x; 
            } 
#curtains:hover {
                            transition-property:background-position;
                            transition-duration:2s;
                            transition-timing-function:ease-out;
                            color:white;
                            background-position: -201px 0px, 450px 0px, left top;
                        }