您好Stackoverflow社区,
我有一个响应式图像网格,并希望鼠标悬停。问题是我看到的大多数方法需要图像具有定义的宽度/高度。
在我的例子中,它没有定义,以便在某些休息时间内响应。
我想实现这个目标:
Text Overlay Example (The centred white box with text)
我目前的HTML代码是:
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3">
<img src="images/home_grid_01.png" alt="" class="maingrid"></td>
<td rowspan="5">
<img src="images/home_grid_02.png" alt="" class="maingrid"></td>
<td>
<img src="images/home_grid_03.png" alt="" class="maingrid"></td>
<td rowspan="5">
<img src="images/home_grid_04.png" alt="" class="maingrid"></td>
<td rowspan="3">
<img src="images/home_grid_05.png" alt="" class="maingrid"></td>
</tr>
<tr>
<td>
<img src="images/home_grid_06.png" walt="" class="maingrid"></td>
</tr>
<tr>
<td>
<img src="images/home_grid_07.png" alt="" class="maingrid"></td>
</tr>
<tr>
<td>
<img src="images/home_grid_08.png" alt="" class="maingrid"></td>
<td>
<img src="images/home_grid_09.png" alt="" class="maingrid"></td>
<td>
<img src="images/home_grid_10.png" alt="" class="maingrid"></td>
</tr>
<tr>
<td>
<img src="images/home_grid_11.png" alt="" class="maingrid"></td>
<td>
<img src="images/home_grid_12.png" alt="" class="maingrid"></td>
<td>
<img src="images/home_grid_13.png" alt="" class="maingrid"></td>
</tr>
</table>
CSS是:
img.maingrid {
width:100%;
height: auto;
}
tr.maingrid {
}
td.maingrid {
}
#Table_01 {
width:960px;
height:500px;
line-height: 0;
}
@media only screen and (max-width: 960px){
#Table_01 {
width:754px;
height:auto;
}
}
@media only screen and (max-width: 754px){
#Table_01 {
width:440px;
height:auto;
}
}
是否可以只使用HTML / CSS?
我可以做的文字样式。我只是无法实现覆盖框,文本内部居中在中间,就像提供的图像一样。
答案 0 :(得分:0)
对我而言,最简单的方法是使用绝对定位的叠加元素
仍需要媒体查询来调整尺寸,但......例如:
img {
width: 100%;
height: auto;
display: block;
}
#Table_01 {
width: 100%;
line-height: 0;
}
td {
position: relative;
}
td:hover .overlay {
display:block;
}
.overlay {
position: absolute;
display:none;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
width: 50%;
height: auto;
}
&#13;
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3">
<img src="http://lorempixel.com/output/animals-q-c-100-100-7.jpg" alt="" class="maingrid" />
<div class="overlay">
<p>Lorem ipsum.</p>
</div>
</td>
<td rowspan="5">
<img src="http://lorempixel.com/output/animals-q-c-100-100-7.jpg" alt="" class="maingrid" />
<div class="overlay">
<p>Lorem ipsum.</p>
</div>
</td>
<td>
<img src="http://lorempixel.com/output/animals-q-c-100-100-7.jpg" alt="" class="maingrid" />
</td>
<td rowspan="5">
<img src="http://lorempixel.com/output/animals-q-c-100-100-7.jpg" alt="" class="maingrid" />
</td>
<td rowspan="3">
<img src="http://lorempixel.com/output/animals-q-c-100-100-7.jpg" alt="" class="maingrid" />
</td>
</tr>
</table>
&#13;