当用户将鼠标悬停在图像上时,我尝试使用 this 在图像顶部显示一些版权文本。示例。
我看不到文字,只看到淡入淡出效果,我错过了什么?
<div class="list-group-item">
<div class="row">
<div class="col-12 col-md-4 vertical-center-col">
<img class="img-thumbnail" src="media/images/EmployeeOne.jpg" alt="">
</div>
<div class="middle">
<div class="text">Image Copyright</div>
</div>
<div class="col-12 col-md-8 mt-2 mt-md-0">
<strong>EmployeeOne</strong>
</div>
</div>
</div>
这是我的 css
文件:
.card-img-top {
min-height: 0.1px;
}
img.img-thumbnail {
border: 1px solid #e4c9c9;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.middle {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.text {
background-color: #04aa6d;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img-thumbnail:hover {
opacity: 0.3;
}
.img-thumbnail:hover .middle {
opacity: 1;
}
最佳答案
将您的 .middle
div 放入与图像相同的容器中,然后在悬停时使用 adjacent sibling 选择它CSS 选择器
.card-img-top {
min-height: 0.1px;
}
img.img-thumbnail {
border: 1px solid #e4c9c9;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.middle {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
z-index: 1;
pointer-events:none;
}
.text {
background-color: #04aa6d;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img-thumbnail:hover {
opacity: 0.3;
}
.img-thumbnail:hover+.middle {
opacity: 1;
}
<div class="list-group-item">
<div class="row">
<div class="col-12 col-md-4 vertical-center-col">
<img class="img-thumbnail" src="https://www.gardendesign.com/pictures/images/675x529Max/site_3/helianthus-yellow-flower-pixabay_11863.jpg" alt="">
<div class="middle">
<div class="text">Image Copyright</div>
</div>
</div>
<div class="col-12 col-md-8 mt-2 mt-md-0">
<strong>Employee name</strong>
</div>
</div>
</div>
关于html - 鼠标悬停在图像上时显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69264812/