<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Thumbnail Gallery with transparent fading caption</title>
<script src="js/jquery-1.3.1.min.js"></script>
<script>
$(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
$('.item').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.item').width() * zoom;
height = $('.item').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':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
</script>
<style>
body {
font-family:arial;
}
.item {
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;
}
.item .caption {
width:125px;
height:125px;
background:#000;
color:#fff;
font-weight:bold;
/* fix it at the bottom */
position:absolute;
left:0;
/* hide it by default */
display:none;
/* opacity setting */
filter:alpha(opacity=80); /* ie */
-moz-opacity:0.8; /* old mozilla browser like netscape */
-khtml-opacity: 0.8; /* for really really old safari */
opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */
}
.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:16px;
/* add spacing and make the whole row clickable*/
padding:5px;
display:block;
}
.item .caption p {
padding:5px;
margin:0;
font-size:10px;
}
img {
border:0;
/* allow javascript moves the img position*/
position:absolute;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="item">
<a href="#"><img src="1.gif" alt="Cycliner" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Cycliner</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="item">
<a href="#"><img src="2.gif" alt="Banana Moon" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Banana Moon</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div>
</div>
<div class="item">
<a href="#"><img src="3.gif" alt="BlueBuck" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">BlueBuck</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="clear"></div>
<div class="item">
<a href="#"><img src="4.gif" alt="SOSO" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">SOSO</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="item">
<a href="#"><img src="5.gif" alt="Buzzsprout" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Buzzsprout</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="item">
<a href="#"><img src="6.gif" alt="Sweetcakes" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Sweetcakes</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="clear"></div>
<div class="item">
<a href="#"><img src="7.gif" alt="Paperbox" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Paperbox</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="item">
<a href="#"><img src="8.gif" alt="Alessandro" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Alessandro</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="item">
<a href="#"><img src="9.gif" alt="Trento Media" title="" width="125" height="125"/></a>
<div class="caption">
<a href="">Trento Media</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="clear"></div>
<br/><br/><br/>
<a href="http://www.queness.com">Queness.com</a> | <a href="">Back to Tutorial</a>
</body>
</html>