Introduction
I came across quite a lot of CSS gallery websites that using huge thumbnail to showcase beautiful websites. Some of them are just ordinary thumbnail, but a lot of them have javascript animated caption to convey more information to viewers. In this tutorial, we will learn how to make ordinary thumbnail to something more. This is my second tutorial about thumbnail gallery, if you missed the first one, you might want to read it later - Create a thumbnail gallery with slick heading and caption effect.
1. HTML
Â
<div class="zitem"> <a href="#"><img data-src="1.jpg" alt="Test 1" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Test 1</a> </div> </div> <div class="zitem"> <a href="#"><img data-src="2.gif" alt="Test 2" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Test 2</a> </div> </div> <div class="zitem"> <a href="#"><img data-src="3.png" alt="Test 3" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Test 3</a> </div> </div>
2. CSS
I have added inline comment in the following CSS code. If you want to learn more about CSS, read my previous post 15 CSS Tips and Tricks or, you want to know MORE ABOUT CSS, read my new post - 15 Ways to Optimize CSS and Reduce CSS File Size
.zitem { width:125px; height:125px; border:4px solid #222; margin:5px 5px 5px 0; /* required to hide the image after resized */ overflow:hidden; /* for child absolute position */ position:relative; /* display div in line */ float:left; } .zitem .caption { width:125px; height:30px; background:#000; color:#fff; /* fix it at the bottom */ position:absolute; bottom:-1px; /* fix IE issue */ left:0; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=70); /* ie */ -moz-opacity:0.7; /* old mozilla browser like netscape */ -khtml-opacity: 0.7; /* for really really old safari */ opacity: 0.7; /* css standard, currently it works in most modern browsers like firefox, */ } .zitem .caption a { text-decoration:none; color:#fff; font-size:12px; /* add spacing and make the whole row clickable*/ padding:5px; display:block; } img { border:0; /* allow javascript moves the img position*/ position:absolute; }
3. Javascript
This is a simple jQuery script with hover effect. What we have to do is calculate the width and height and set it to the image.
$(document).ready(function() { //move the image in pixel var move = -15; //zoom percentage, 1.2 =120% var zoom = 1.2; //On mouse over those thumbnail $('.zitem').hover(function() { //Set the width and height according to the zoom percentage width = $('.zitem').width() * zoom; height = $('.zitem').height() * zoom; //Move and zoom the image $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200}); //Display the caption $(this).find('div.caption').stop(false,true).fadeIn(200); }, function() { //Reset the image $(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100}); //Hide the caption $(this).find('div.caption').stop(false,true).fadeOut(200); }); });
Conclusion
Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.<div class="caption">
<a href="">Here</a>
</div>
Not sure about image thou, I don't think it will fit.
Gotta love jQuery
thanks
<style>
..... (added above .zitem in style)
.divout {
border: solid 1px #aaa;
width: 100%;
margin:0px auto;
}
.zitem.......
<div class"divout">
<div class="zitem"> .....
I'm very noobish, I have kept everything else the same ..float left etc in .zitem. Any further help appreciated.
Thanks
divout{
width:100%;
border:1px solid #222;
margin:0px auto ;
white-space: nowrap;
text-align: center;
}
.zitem {
width:170px;
height:100px;
border:1px solid #222;
margin:5px 5px 5px 0;
text-align: left;
white-space: normal;
letter-spacing: normal;
/* required to hide the image after resized */
overflow:hidden;
/* for child absolute position */
position:relative;
/* display div in line */
display: inline-block;
vertical-align: middle;
}
/* this makes it compatible with IE 7 and below since IE doesnt understand inline-block
.zitem {
*display: inline;
*margin: 5px 5px 5px 5px;
}
Then make sure to double div...
<div class="divout">
<div class="zitem"> ......
hope that helps
i love this css trick, but unfortunately i can t make it work that the zooming appears from the center. .it seemed to work at the first try, but then it simply zooms in the upper left corner...
i copied your code...
any help?
Thanks
in the css, the img {
border:0;
/* allow javascript moves the img position*/
position:absolute; }
messes with my banner image and messes up the whole page. I've tried to change it to
.zitam img{ }
but it doesn't work, it doesn't stack the images on top of one another like it does without .zitam, but the caption doesnt work.
I've done this as a test page, where it was blank and i added minimal code toyours and it worked, but i can't get tit with code i already hav.
Good day.
Very nice.
Is it possible to integrate this effect in slimbox or lightbox gallery?
Thanks for your work