我试图在悬停时放大图像，效果很好。但是当我在图像上添加文本时，它会在底部显示一些间隙。我试过了，但这个差距根本没有消除
我尝试了 margin，padding，但是没有用
.img-hover-zoom {
height: auto;
overflow: hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text {
position: absolute;
padding-top: 15px;
padding-bottom: 15px;
left: 0px;
bottom: 0px;
margin: 0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br />What a beautiful sunrise</p>
</div>
</body>
</html>最佳答案
只需将 display: block 添加到您的 .img-hover-zoom img
.img-hover-zoom img {
display: block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.img-hover-zoom {
height: auto;
overflow: hidden;
position: relative;
display: inline-block;
}
.img-hover-zoom img {
transition: transform .5s ease;
display: block;
}
.img-hover-zoom:hover img {
transform: scale(1.1);
}
.img-hover-zoom .text {
position: absolute;
padding-top: 15px;
padding-bottom: 15px;
left: 0px;
bottom: 0px;
margin: 0px auto;
text-align: center;
background: rgba(0, 0, 0, 0.5);
font-family: Quicksand;
color: #fff;
width: 100%;
}
</style>
</head>
<body>
<div class="img-hover-zoom">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
<p class="text">Nature<br/>What a beautiful sunrise</p>
</div>
</body>
</html>关于html - 将鼠标悬停在图像上并在文本上缩放图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56864299/