html - 将文本悬停在图像上时缩放图像
问题描述
我试图在悬停时放大图像,它工作正常。但是当我在图像上添加文本时,它会在底部显示一些间隙。我试过了,但这个差距根本没有消除
我尝试了边距,填充,但没有用
.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>
推荐阅读
- jsp - JSP-调用JSP页面时如何查看PDF文档?
- go - 在从 yaml 文件读取的 go 结构中模拟类似补丁的合并
- c# - 编辑gridview记录页面导航后如何保留文本框值和gridview值
- sql - 在 MariaDB 10.2.15 中使用 COUNT CASE WHEN MONTH 语句
- angular - 错误 TS1055:类型“布尔”不是 Ionic 4 中 ES5/ES3 中的有效异步函数返回类型
- wso2 - 使用 wsdl2java 调用 wso2 管理服务
- vue.js - 如何在 vuejs 中使用自定义指令更改字体大小
- r - 如何重新计算列并将新值存储在同一数据框中?
- php - 如何反转一组逗号分隔的字符串并在 PHP 中以原始顺序返回它们?
- mysql - 数据建模和实现关系[1对多][多对多]等