New Topic/Question
Reply
I am trying to replicate an effect i saw on this site when you hover over the images:
http://www.sessiondigital.com/
I have managed to get an image to slide from on top of another down. But i need to slide an image from the bottom over the initial image.
Here is the code i have so far:
<!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>
<title></title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.wrap').hover(function(){
$(this).children('.front').stop().animate({ "top" : '100px'}, 700);
}, function(){
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
</script>
<style type="text/css">
#container
{
width: 850px;
text-align: center;
margin: auto;
}
.wrap
{
width: 251px;
height: 178px;
position: relative;
overflow: hidden;
float: left;
padding: 0 lem;
}
img
{
position: absolute;
top: 0; left: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="wrap">
<img src="img2.jpg" alt="image" />
<img src="img1.jpg" class ="front" alt="image" />
</div>
</div>
</body>
</html>
Any help would be excellent.
MultiQuote
| 