Jquery hover animation Scale on browser window resize

Question

I'm using jQuery to Animate an image while hovering it. I need it to be able to be re-sized/scaled with the browser. The problem is that I cant get overflow:hidden to work because I don't have a fixed height on my div. I want the width to be 100% and I need the height to be 50% of the width of the div. Please help

Link to my example http://www.jasalounge.com/tester/

    $(function(){
        $("#box1 a").hover(function(){
            $("img", this).stop().animate({top:"-50%"},{queue:false,duration:150});
        }, function() {
            $("img", this).stop().animate({top:"0px"},{queue:false,duration:150});
        });
    });


#box1 {
    width:100%;
    max-width:250px;
    border:none;
    overflow:hidden;


}
#box1 img {
    width:100%;
    position:relative;

}



     <div id="box1"><a href="#"><img src="images/test3.png" alt="test"/></a></div>

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Change your animate function to

$(function(){
    $("#box2 a").hover(function(){
        $("img", this).stop().animate({top:"-" + $("img", this).height() / 2 +"px"},{queue:false,duration:150});
    }, function() {
        $("img", this).stop().animate({top:"0px"},{queue:false,duration:150});
    });
});

Change css to

#box2_wrapper{
    width:30%;
}
#box2 {
    overflow:hidden;
    border:none;
    height:0;
    padding-bottom: 90%;
}

#box2 img {
    width:100%;
    position:relative;
}

and html to

<div id="box2_wrapper">         
    <div id="box2">  
        <a href="#"><img style="top: 0px;" src="test_files/test3.png" alt="test"></a>
    </div>
</div>

this will wrap your box div in a wrapper that you can resize as you wish. box2 in this case then becomes a box that has a 10:9 aspect ratio since the padding-bottom 90% is 90% of the width of the wrapper. it is 90% as your images are 10:18 aspect ratio and you want to display half at a time.

Maintain the aspect ratio of a div with CSS

and

Keep div height relevant to aspect ratio

explain techniques to doing this

It’s working almost perfect but now I'm having a problem with a scroll bar showing up in IE and on the top and left edge there seems to be some kind of border as if the image is not lining up properly. I’m still confused about the aspect ratio and padding-bottom %. http://jasalounge.com/tester2/ — ijustchill, Aug 19 '13 at 06:55
change #homeIntro to overflow:hidden to remove scroll bar. Not sure exactly what you mean by some strange border. The aspect ratio stuff is explained fairly well in the links i pointed you to. If you want a box to have a width relative to the height then it is the same as saying the box has a constant aspect ratio. Since padding-bottom in this case is calculated based off the width of the element it means the height of the element including padding will be 90% of the width. Remember to accept an answer as correct if you feel it is correct — DGS, Aug 19 '13 at 10:09

Jquery hover animation Scale on browser window resize

1 Answers1