Question

我需要将图像元素（.myImages）保留在div（.Holder）中。在页面加载时，它位于div的中心。在图像（.myImages）的mouseOver上，图像缩放到＆＃34; 2＆＃34;的比例，并且容器div动画在宽度和高度上都变大。问题是，当图像在悬停时缩放时，它会从div的顶部出来。我希望它在div中扩展。不要走出去。所有答案都赞赏。

代码：

＆＃13;

$(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' });
        });
      });

＆＃13;

.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;
     }

＆＃13;

<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>

＆＃13;

Answer 1

这是一个解决方案，它使用CSS hover pseudoclass将div的大小翻倍。这接近你想要的吗？

＆＃13;

.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);
}

＆＃13;

<div class ="Holder">
    <img class="myImages" src="http://i.imgur.com/8mro6SN.jpg?1" width="200" height="180">
</div>

＆＃13;

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

在鼠标悬停时缩放包含图像的div

1 个答案: