0 Replies - 444 Views - Last Post: 13 February 2012 - 04:14 PM

#1 STP_Captain_Slow  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 74
  • Joined: 08-October 10

JQuery Image Overlay Slide

Posted 13 February 2012 - 04:14 PM

Hi

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.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1