html - 覆盖 div 中的文本格式
问题描述
我正在尝试在图像上创建悬停覆盖。我得到了代码;https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
我的文本有问题,我想在它下面放一个小标题和一句话描述。我似乎无法使它适合,因为新行将上述文本进一步向上推,并将其留在一个段落标签上使其溢出。
我正在使用 wordpress、custom-css 插件和 WYSIWYG 编辑器。
.container {
float: left;
position: relative;
width: 25%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: pre;
color: #000000;
font-size: 20px;
position: absolute;
overflow: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img class="image" src="https://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Shakletons.png" alt="logo" width="733" height="494" />
<div class="overlay">
<div class="text">
<p><span style="font-size: small;">Inspiring products of indoor and outdoor furniture</span>
</p>
</div>
</div>
</div>
如何使文本“适合”悬停框?
解决方案
您需要删除<p>
and<span>
标记并删除此行:
white-space: pre;
并替换它:
font-size: 20px;
有了这个:
font-size: small;
这就是您修复它所需的全部内容,但我也冒昧地简化了您的代码。
.container {
float: left;
position: relative;
width: 25%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #edede7;
width: 100%;
height: 0;
transition: .5s ease;
overflow: hidden;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
overflow: visible;
}
.text {
position: absolute;
font-size: small;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img class="image" src="https://via.placeholder.com/500x500" alt="logo"/>
<div class="overlay">
<div class="text">
Inspiring products of indoor and outdoor furniture
</div>
</div>
</div>
推荐阅读
- javascript - Web 服务器没有检测到带有 src 的脚本标签
- python - Python flask-sqlalchemy:查询后是否必须提交会话?
- python - 从 python 列表中打印 CSV
- css - 如何为 CSS 文件中的所有类指定一个伞类?
- amp-html - 我找不到 Amp dev 的任何资源
- javascript - 在画布上绘制 2 个像素,缩放为 20 个像素,没有模糊或纹理渗出
- haskell - 在 Haskell 中,1 自身无限相乘的结果是什么?
- google-bigquery - 在 BigQuery 中可以将“INFORMATION_SCHEMA”作为数据集添加并固定吗?
- python - 使用 python 子进程获取硬件 ID 时出错
- python - Python中的旋转数组