
Today you will learn how to create an interactive image gallery with CSS3, without using any JavaScript or jQuery.
<style type="text/css"> .swapimg {float: left; position: relative; display:block;} .swapimg img {z-index:1;} .swapimg a.img-info img { width:142px; height:97px; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; } .swapimg a.img-info:hover img { width:285px; height:194px; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; } .swapimg a.img-info span.magnify { background:url(magnify.png) no-repeat 0 0;} .swapimg a.img-info:hover span.magnify {background:url(magnify.png) no-repeat 0 0; width:31px; height:32px; position:absolute; right:10px; bottom:10px; display:block;} .swapimg a.img-info:hover .enlarge-img span.magnify {background:url(magnify.png) no-repeat 0 0; display:block;} </style>
HTML:
<a name="#row1"></a> <div class="swapimg-row"> <div class="swapimg"> <a class="img-info" href="#row1"> <span class="enlarge-img" id="image1"> <img alt="" src="pigeon.jpg"> <span class="magnify"></span> /*For magnify glass*/ </span> </a> </div> <div class="swapimg"> <a class="img-info" href="#row1"> <span class="default-img" id="image2"> <img alt="" src="squirrel.jpg"> <span class="magnify"></span> </span> </a> </div> <div class="swapimg"> <a class="img-info" href="#row1"> <span class="default-img" id="image3"> <img alt="" src="monkey.jpg"> <span class="magnify"></span> </span> </a> </div> </div> <div style="clear:both"></div>
RESULT:
If you wants to use multiple images for the gallery then copy a image container [ <div class="swapimg"> - <div>] and paste how many you wants.
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.
ReplyDelete