Split Photo Viewer using CSS3 Transforms

.slider { width:520px; overflow:hidden; display:inline-block; -webkit-transform:skewX(-20deg); -moz-transform:skewX(-20deg); -ms-transform:skewX(-20deg);
-o-transform:skewX(-20deg); transform:skewX(-20deg); -webkit-transition:width 1.2s ease-in-out; -moz-transition:width 1.2s ease-in-out; -ms-transition:width 1.2s ease-in-out; -o-transition:width 1.2s ease-in-out; transition:width 1.2s ease-in-out; margin-left:-76px; border-right:10px solid ghostwhite; pointer-events:none; }
.box { width:800px; height:430px; border-radius:.5em; }
.box a { display:block; width:100%; height:100%; }
.sunset { -webkit-transform:skewX(20deg); -moz-transform:skewX(20deg); -ms-transform:skewX(20deg); -o-transform:skewX(20deg); transform:skewX(20deg);
background:url(night.jpg) no-repeat; margin-left:76px; pointer-events:auto; }
.sunrise { background: url(day.jpg) no-repeat; position:absolute; box-shadow:0 0 10px rgba(0, 0, 0, .7); }
.slider:hover { width:760px; }
.sunrise:hover + .slider { width:250px; }
body { font-family:helvetica, sans-serif; margin:1EM; }
h1 { color:#2F2F2F; font-size:26px; text-shadow:0 0 2px white; margin-bottom:20px; }

<h1>Split Photo Viewer using CSS3 Transforms</h1>
<div class="box sunrise"> <div class="slider">
<div class="box sunset"> </div>

Tagged in:

• css3 slideshow
• css3 photo viewer
• photo slide css3
• slider css3