<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | jQuery Image Zoom</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {
var move = -15
zoom = 1.1;
$('.item').hover(function() {
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeIn(300);
},
function() {
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeOut(400);
});
});
</script>
<style>
.item {
width:220px;
height:193px;
border:4px solid #333;
margin:30px 5px 10px 5px;
overflow:hidden;
position:relative;
float:left;
}
.item .caption {
width:220px;
height:71px;
bottom:0;
color:#fff;
background:#000;
font-weight:700;
position:absolute;
left:0;
display:none;
filter:alpha(opacity=82);
-moz-opacity:0.9;
opacity: 0.9;
}
.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:17px;
letter-spacing:-1px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
display:block;
}
.item .caption p {
padding:5px;
margin:0;
color:#fff;
line-height:15px;
font-size:12px;
}
.item img {
border:0;
position:absolute;
}
</style>
</head>
<body>
<div class="item"> <img src="jennifer.jpg" height="196" width="220" />
<div class="caption"> <a href="http://www.dexmore.com">Jennifer Johnston</a>
<p>Scottish voiceover Jennifer Johnston. Branding, site design and development</p>
</div>
</div>
<div class="item"> <img src="mimitah.jpg" height="196" width="220" />
<div class="caption"> <a href="http://www.dexmore.com">Mimitah Bofando</a>
<p>African musician Mimitah Bofando. Branding, site design and development</p>
</div>
</div>
<div class="item"> <img src="kate.jpg" height="196" width="220" />
<div class="caption"> <a href="http://www.dexmore.com">Kate Mcintyre</a>
<p>TV presenter Kate Mcintyre. Branding, site design and development</p>
</div>
</div>
<div class="clear"></div>
</body>
</html>
หน้า: 1 
Powered by 