i need keep image element (.myimages) within div (.holder). on page load, sitting bang in centre of div. on mouseover of image (.myimages), image zooms scale of "2", , container div animates become larger in both width , height. problem when image scales on hover, comes right out of top of div. want expand within div. not go outside it. 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: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; -ms-transition: .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>
here's solution uses css hover pseudoclass double size of div when it's moused over. close 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: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; -ms-transition: .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>
Comments
Post a Comment