如何在没有悬停时实际div缩放的情况下在div范围内制作图像?所以我只想让图像放大。
以下是代码:
<div id="container">
<img id="image" src="some-image">
</div>
答案 0 :(得分:5)
使用transform: scale
#container {
display: inline-block;
margin: 20px;
border: 1px solid black;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
#container img {
display: block;
transition: transform .4s; /* smoother zoom */
}
#container:hover img {
transform: scale(1.3);
transform-origin: 50% 50%;
}
&#13;
<div id="container">
<img id="image" src="http://placehold.it/150">
</div>
&#13;
答案 1 :(得分:0)
具有过渡效果的优雅解决方案
#container {
display: inline-block;
overflow: hidden;
}
#container img {
display: block;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#container:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div id="container">
<img id="image" src="http://placehold.it/200">
</div>