使用HTML / CSS在响应网格上的图像上叠加文本?

时间:2015-03-11 15:01:56

标签: css

您好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?

我可以做的文字样式。我只是无法实现覆盖框,文本内部居中在中间,就像提供的图像一样。

1 个答案:

答案 0 :(得分:0)

对我而言,最简单的方法是使用绝对定位的叠加元素

仍需要媒体查询来调整尺寸,但......例如:

&#13;
&#13;
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;
&#13;
&#13;