使图像从中心悬停时展开，并使图像仍保留在框中

Question

我正在尝试使我的图像像这样：http://www.kas.tw/(将鼠标悬停在图像轮播下方的图像上(，但我的图像从侧面展开，我不知道如何使图像仍然留在其框中，这是代码。

.CSS

#image3{
top: 130%;
left: 20%;
display: none;
}
#cover1{
width: 5%;
height: 100%;
left: 47%;
background-color: green;
z-index: 2;
top: 94%;
position: absolute;
}
.zoom {
padding: 50px;
transition: transform .2s; /* Animation */
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, 
it will go outside of the viewport) */
}

.HTML

<DIV class='zoom' id='image1'><IMG width='50%' height='90%' src="slime3.JPG"></DIV>
<DIV  id='image2'><IMG width='50%' height='90%' src="slime4.JPG"></DIV>
<DIV  id='image3'><IMG width='50%' height='90%' src="slime5.JPG"></DIV>
<DIV  id='image4'><IMG width='50%' height='90%' src="slime6.JPG"></DIV>
<DIV  id='image5'><IMG width='50%' height='90%' src="slime7.JPG"></DIV>
<DIV  id='image6'><IMG width='50%' height='90%' src="slime8.JPG"></DIV>
<DIV id='cover1'><DIV>
<DIV id='cover2'><DIV>
<DIV id='cover3'><DIV>
<DIV id='cover4'><DIV>
<DIV id='cover5'><DIV>

Answer 1

您可以使图像保留在框中，而无需扩展其容器大小。

这可以在CSS上完全通过使用max-width来完成，max-height设置特定的框大小，并使用overflow: hidden在图像扩展超过宽度和高度时隐藏多余的图像。

transform: scale(2,2)允许图像从中心缩放。

试试这个：

#holder {
max-width: 200px;
max-height: 200px;
overflow: hidden;
}
#holder img {
width: 100%;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#holder img:hover {
transform: scale(2,2);
}

<div id="holder">
<img src="https://picsum.photos/200/200">
</div>

Answer 2

你可以试试这个

<div class="item">
<img>..</img>
</div>

和 CSS

.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}