CODEWITHSUNDEEP
javascripthtmlcss
Star's Studio
Star's Studio

Reputation: 97

Scale a div with an image in it on mouseover

I need to keep the image element (.myImages) within the div (.Holder). On page load, it is sitting bang in the centre of the div. On mouseOver of the image (.myImages), the image zooms to a scale of "2", and the container div animates to become larger in both width and height. Problem is that when the image scales on hover, it comes right out of the top of the div. I want it to expand within the div. Not to go outside it. All answers appreciated.

Code:

$(document).ready(function(){
        $('.myImages').hover(function() {
            $(this).addClass('transition');
         $('.Holder').animate({ width: '600', height: '410' });
    	 
        }, function() {
            $(this).removeClass('transition');
    		 $('.Holder').animate({ width: '300', height: '250' });
        });
      });
.myImages {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
    	z-index:-1;
    	 margin:20px;
    }
     
    .transition {
        -webkit-transform: scale(2); 
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }
    
    .Holder{position: relative;
      background-color:white;
      text-align: center;
      width: 300px;
      height: 250px;
      border: 2px solid;
      margin:200px;
      padding:0;
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="Holder">
    <img class="myImages" onclick="changeImage()" src="a.jpg" width="200" height="180">
</div>

Upvotes: 2

Views: 4202

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

Here's a solution that uses the CSS hover pseudoclass to double the size of the div when it's moused over. Is this close to what you were looking for?

.myImages {
    z-index: -1;
    margin: 20px;
}
.transition {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}
.Holder {
    position: relative;
    background-color: white;
    text-align: center;
    width: 300px;
    height: 250px;
    border: 2px solid;
    margin: 20px;
    padding: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
.Holder:hover {
    transform-origin: top left;
    transform: scale(2.0);
}
<div class ="Holder">
    <img class="myImages" src="http://i.imgur.com/8mro6SN.jpg?1" width="200" height="180">
</div>

CodePen: http://codepen.io/maxlaumeister/pen/LVayOO

Upvotes: 4

Related Questions