Hovering Slideshow Base. (optimized for Chrome)
This isn’t really a tutorial since I’m not really explaining, but I think giving out a base will be easier than explaining each line.
The main trick is having a div inside an other. The interior one having a superior width, the exterior one being only like a frame.
Since the images are set as background, you can easily add buttons or text or whatever in your pannels.
CSS :
#slideshow {height:300px; width:600px; overflow-y:hidden; /*no vertical scroll*/} #content {width:1200px; /*the more you'll have pannels the more you'll raise its value*/} #title {position:absolute; -webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;} #content:hover #title {opacity:0;} .pannel {width:150px; height:300px; float:left; overflow:hidden; background-position:-150px; /*value is (-)width*/ -webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;} .pannel:hover {width:500px; /*width of your pannel Backgorund image*/ background-position:0px;}HTML :<div id='slideshow'> <div id='content'> <div id='title'>choose your path</div> <div class='pannel' style='background-image:url('http://static.tumblr.com/s2ymoja/hALm9835c/500300.png');'> </div><!--pannel 1--> <div class='pannel' style='background-image:url('http://static.tumblr.com/s2ymoja/Eb4m9836t/500301.png');'> </div><!--pannel 2--> <div class='pannel' style='background-image:url('http://static.tumblr.com/s2ymoja/U0nm9838s/500302.png');'> </div><!--pannel 3--> <div class='pannel' style='background-image:url('http://static.tumblr.com/s2ymoja/Vjam983ba/500303.png');'> </div><!--pannel 4--> <div class='pannel' style="background-image:url('http://static.tumblr.com/s2ymoja/Zhmm983cm/500304.png');"> </div><!--pannel 5--> </div><!--content--> </div><!--slideshow-->
(via lmthemes)
