我有一个带有图像和内部文字的缩略图。当我将鼠标悬停在图像上时,它会放大。 这是一个小提琴: https://jsfiddle.net/ShiroiOkami/r1awd3b4/
我希望实现图像只是放大的效果,但它的大小保持不变。我不希望它成长。怎么做?
P.S。代码例如:
<div class="wrapper">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" style="width:150px;" class="grow">
<div class="description">
<h3>
Some title
</h3>
<p>
some text
</p>
</div>
CSS:
.wrapper{
background-color: #fff;
text-align: center;
width: 150px;
overflow: hidden;
}
.grow{
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.grow:hover{
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
.description{
background-color: #fff;
overflow: hidden;
}
答案 0 :(得分:1)
我已经修复了你的小提琴,所以你将获得所需的效果:https://jsfiddle.net/r1awd3b4/1/
我所做的是在图片周围添加额外的包装div
:
<div class="img-wrapper">
<img src="..." class="grow">
</div>
CSS:
.img-wrapper{
width: 100%;
height: 150px;
overflow: hidden;
}
.img-wrapper img{
display: block;
width: 100%;
}
现在图像可以随心所欲地增长,但由于包装不会,图像不会“增长”,而只是缩放&#39;。
答案 1 :(得分:1)
你可能意味着这种效果?:
<div class="wrapper">
<div class="img-container">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" style="width:150px;" class="grow">
</div>
<div class="description">
<h3>Some title</h3>
<p>some text</p>
</div>
</div>
和css:
.img-container {
width: 150px;
height: 150px;
overflow: hidden;
}