html - 在图像悬停时,覆盖原始图像并显示文本
问题描述
将鼠标悬停在图像上时,我希望辅助图像与文本一起显示,但我的方法似乎无法正常工作。
我想怎么想:
红色为正常,右图为悬停状态。
这是我目前的方法:
.img-wrap {
position: relative;
height: 360px;
width: 360px;
}
.img-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
}
.img-wrap:hover .img-description {
visibility: visible;
opacity: 1;
}
ul {
list-style-type: none;
margin: auto;
}
<div class="img-wrap">
<ul class="clearfix">
<li>
<img src="https://cdn2.hubspot.net/hubfs/1878396/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/large-cta.png?t=1528962213286" />
</li>
</ul>
<img class="img-img" src="https://insights.zonal.co.uk/hubfs/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/cta-bg.png" />
<h2 class="img-description">TEST</h2>
<span class="button large-cta-button">Read more</span>
</div>
解决方案
对于透明颜色覆盖,您可以使用类似:after
. li
这样,它将始终保持在 li 和 img 之上。img 应该有一个max-width:100%
,所以它不会溢出它的父级 ( li
)。
然后,涉及一些非常简单的样式。您还可以添加一些关于蓝色叠加层应如何显示的动画,但这取决于您。
如果您有任何问题,请在评论中提问。
.img-wrap {
position: relative;
height: 360px;
width: 360px;
}
img {
max-width: 100%;
height: auto;
}
.img-wrap ul {
padding: 0;
}
.img-wrap li {
position: relative;
}
.img-wrap .img-description {
position: absolute;
opacity: 0;
z-index: 2;
transition: 0.3s ease-out;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
width:auto;
}
.img-wrap li .img-description h2 {
margin-bottom: 50px;
}
.img-wrap li .img-description a {
padding: 10px;
color: #fff;
border: 1px solid #fff;
}
.img-wrap li:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
height: 100%;
width: 100%;
content: "";
}
.img-wrap:hover li:after {
visibility: visible;
opacity: 1;
}
.img-wrap:hover .img-description {
opacity: 1;
}
ul {
list-style-type: none;
margin: auto;
}
<div class="img-wrap">
<ul class="clearfix">
<li>
<img src="https://cdn2.hubspot.net/hubfs/1878396/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/large-cta.png?t=1528962213286" />
<div class="img-description">
<h2>
TEST
</h2>
<a>Test link</a>
</div>
</li>
</ul>
</div>
推荐阅读
- node.js - URLSession 正在发出 GET 请求而不是 POST 请求
- regex - 正则表达式提取第三个连字符之前和之后的字符串
- powershell - 如何在 PSCustomObject 的 ScriptMethod 上使用默认值
- javascript - 在本地准确确定或设置新渲染帧的帧速率和回调的解决方案
- r - 如何在 R 中创建包含重复值和唯一值的新列
- google-bigquery - 聚合多个未嵌套元素时,标量子查询产生多个元素异常
- javascript - 这段 Javascript 代码中的 octothorpe 是什么意思?
- c - glut.lib 和 glut32.lib 有什么区别?以及如何利用这一点?
- python - 获取 ValueError:Series 的真值不明确。使用 a.empty、a.bool()、a.item()、a.any() 或 a.all()
- c++ - 在 C++ 中编译时出现问题:“未定义对 'WinMain' 的引用。为策划者编写游戏