我想在我的图像前面显示一个表格。悬停时图像不透明度会发生变化,但当我将鼠标悬停在图像上时,表格的不透明度也会发生变化。
我已经尝试过更改表格的不透明度,但似乎没有用。 (或者我可能做错了)。
代码只有 HTML 和 CSS,因为它将用于作业。
有人知道如何解决这个问题吗?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ImageGallery {
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
display: flex;
flex: 100%;
padding: 1em;
justify-content: center;
align-items: center;
}
.imagehover {
transition: all 0.5s linear;
}
.imagehover:hover img {
opacity: 0.5;
}
.imageinfo {
position: absolute;
opacity: 0;
transition: all 0.5s linear;
}
.imageinfo table {
background-color: rgba(0, 0, 0, 0.7);
color: #FFFFFF;
}
.imagehover td {
padding: 0.5em;
}
.imageinfo:hover {
opacity: 1;
}
.centered-text {
position: absolute;
top: 15%;
left: 42.5%;
transform: translate(-50%, -50%);
}
<div class="ImageGallery">
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg"
alt="Ferrari_LaFerrari">
<div class="centered-text">
<div class="imageinfo">
<table>
<tr>
<td>Type</td>
<td>Ferrari LaFerrari</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg"
alt="Ferrari_812_Superfast">
<div class="centered-text">
<div class="imageinfo">
<table>
<tr>
<td>Type</td>
<td>Ferrari 812 Superfast</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
最佳答案
改变:
.imagehover:hover {
opacity: 0.5;
}
收件人:
.imagehover:hover img {
opacity: 0.5;
}
因此您只是更改图像的不透明度
,而不是包装图像和表格的容器。完整的固定片段:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ImageGallery {
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
display: flex;
flex: 100%;
padding: 1em;
justify-content: center;
align-items: center;
}
.imagehover {
transition: all 0.5s linear;
}
.imagehover:hover img {
opacity: 0.5;
}
.imageinfo {
position: absolute;
opacity: 0;
transition: all 0.5s linear;
}
.imageinfo table {
background-color: rgba(0, 0, 0, 0.7);
color: #FFFFFF;
}
.imagehover td {
padding: 0.5em;
}
.imageinfo:hover {
opacity: 1;
}
.centered-text {
position: absolute;
top: 15%;
left: 42.5%;
transform: translate(-50%, -50%);
}
<div class="ImageGallery">
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg"
alt="Ferrari_LaFerrari">
<div class="centered-text">
<div class="imageinfo">
<table>
<tr>
<td>Type</td>
<td>Ferrari LaFerrari</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg"
alt="Ferrari_812_Superfast">
<div class="centered-text">
<div class="imageinfo">
<table>
<tr>
<td>Type</td>
<td>Ferrari 812 Superfast</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
关于html - 仅使用 HTML 和 CSS 在图像顶部显示表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52807400/