使用以下代码,我可以在悬停时放大图像:
.image {
width: 250px;
height: 250px;
background-image: url(http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid red;
cursor: pointer;
}
.image:hover {
background-size: 120% 120%;
}
<div class="image"></div>
我如何使用 <img>
来做到这一点?标签而不是 <div>
有背景图片吗?
最佳答案
您可以将图像包裹在一个 div 中:
<div class="item">
<img src="http://via.placeholder.com/200x200">
</div>
并应用这个 CSS:
.item { //This is the container div
border: 1px solid red;
overflow: hidden;
width: 200px;
height: 200px;
}
.item img { //This is the img
transition: all 0.3s;
}
.item:hover img { //This is the img during hover
transform: scale(1.5); //Increase or decrease this number to change the zoom
}
.item {
border: 1px solid red;
overflow: hidden;
width: 200px;
height: 200px;
}
.item img {
transition: all 0.3s;
}
.item:hover img {
transform: scale(1.5);
}
<div class="item">
<img src="http://via.placeholder.com/200x200">
</div>
关于html - CSS放大图像悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46748022/