CODEWITHSUNDEEP
jquerycsshtmljquery-animatezooming
Prashant Singh
Prashant Singh

Reputation: 3793

Zooming image in a div with all other div constant

I have a div with an image and several other div in surroundings. Now, I am animating the image a bit, but it displaces the content below it. Any way to fix it out ?

Here is a demo of what I have done . I wish to zoom the mobile image without affecting the lower div.

The javascript, I am using for that effect is :-

<script>
$(document).ready(function() {
    $('.itemDisplay').mouseenter(function(e) {
        $(this).find('.itemimgWrap').children('img').animate({ height: '135', left: '-20', top: '-20'}, 100);
    }).mouseleave(function(e) {
        $(this).find('.itemimgWrap').children('img').animate({ height: '120', left: '0', top: '0'}, 100);
    });
});
</script>

Upvotes: 1

Views: 1334

Answers (2)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

You need to set the image container to 120px and overflow:hidden if you want to avoid the image goes over the text ;)

.itemimgWrap{
   overflow: hidden;
   height: 120px;
}

And you can do the animation using CSS3 (but I still recommend Jquery):

.itemimgWrap img {
    transform: scale(1);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}
.itemimgWrap img:hover{
    transform: scale(1.5);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
}

Upvotes: 1

Prashant Singh
Prashant Singh

Reputation: 3793

Setting the height of the div containing the image worked 

  .itemimgWrap{
    height: 120px!important;
   }

Upvotes: 0

Related Questions