![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kfiopvUoKE4quR9SZXBke-djm4TGfKr-cp47Zju18IJ5oes-sVbPfgD7lQoB6PzqAcQSJ0ERGf1OxgnaQCgxa24R8EdPX5NCT_dPBSNCjp9zVTmdwy5_Qa2DU02KxDtLWd03LuGSpssj/s200/thumbnail.jpg)
We just need html code,css, jquery and attractive images and a little bit creativity.
Download
Html Code:
<section class="main"> <div id="th-wrap" class="th-wrap"> <img src="images/1.jpg"/> <div class="th-inner"> <ul> <li><a target="_blank" href="#"><img src="images/thumbs/1.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/2.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/3.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/4.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/5.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/6.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/7.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/8.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/9.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/10.jpg" /></a></li> <li class="th-thumb-current"><a target="_blank" href="#"><img src="images/thumbs/11.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/12.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/13.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/14.jpg" /></a></li> <li><a target="_blank" href="#"><img src="images/thumbs/15.jpg" /></a></li> </ul> </div> </div> <span id="th-view" class="th-toggle">Toggle Thumbs</span> <!-- Dummy slider elements --> <nav class="th-nav"> <span class="th-prev">Previous</span> <span class="th-next">Next</span> <div class="th-navdots"></div> </nav> <div class="th-click"></div> </section>
Image:
Css Code:
For an awesome effect you have to create a structure where all this result is shown. This is the css code for this special purpose.
From the above structure we also have to build structure for thumbnails.It is as follows.
The divisions with the class th-part will be the parts that will animate. Each one of the parts will have a height of half of the whole wrapper.
.th-wrap .th-part { width: 100%; height: 150px; position: relative; overflow: hidden; background: #f0f0f0; }This is the css when we click the button to toggel the view of 3D thumbnails.
.th-wrap.th-active .th-part:nth-child(2), .th-wrap.th-active .th-part:nth-child(3){ transform: translateY(-150px) translateZ(0px) rotateX(0deg); } .th-wrap.th-active .th-part:nth-child(1), .th-wrap.th-active .th-part:nth-child(4){ transform: translateY(-150px); }
Comments
Post a Comment
your Comment is sent for moderation, Thankyou