如何将文本悬停在img上-宽度和高度是可变的

Question

如果高度和宽度固定，我知道如何将文本悬停在图像上。但我有一个响应滑块（猫头鹰滑块），想添加链接（简单-是的。）和一个蓝色覆盖，其中有白色文本，以及一个简单的渐变/滑动过渡。

问题是：每个项目在调整大小时都会更改其高度和宽度。我可以写几个媒体查询，但我很确定这个问题一定有一个更简单的解决方案。

我有一个非常简单的标记：

<div>
 <a href="#">
  <img src="http://placehold.it/360x100">
  <div class="overlay">Click here for more Infomartion</div>
 </a>
</div>

通常我会选择纯css方法，将高度和宽度从.overlay设置为图像大小，并在悬停时设置可见性。但是这是行不通的，因为宽度&高度因视口而异。那么，你有什么建议？

Answer 1

技巧包括将position: relative设置为包含图像的父容器.image-container。使用display: inline-block将强制父容器收缩以适应图像。

然后将position:absolute应用于子容器（覆盖）.hover-text，并将所有偏移（left、right、top和bottom）设置为零，这将强制覆盖与图像大小匹配。

如果要使文本垂直居中，则需要添加两个嵌套块。一种方法是使用宽度和高度为100%的display: table重新调整a元素的用途，然后使用vertical-align: middle将display: table-cell应用于嵌套的div。如果需要，这将使文本垂直居中。

我添加了一个过渡效果来演示如何设置它。你可以根据持续时间和过渡类型的需要调整细节。

参考编号：http://www.w3.org/TR/css3-transitions/

您也可以使用CSS转换进行翻译，这也是可行的，因为现代浏览器支持转换（尤其是2D）。

.image-container {
  position: relative;
  display: inline-block;
}
.image-container .hover-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 255, 0.5);
  opacity: 0;
  transition: opacity;
}
.hover-text a {
  display: table;
  height: 100%;
  width: 100%;
  text-decoration: none;
}
.hover-text a div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 3.0em;
  color: white;
}
.image-container img {
  vertical-align: top; /* fixes white space due to baseline alignment */
}
.image-container:hover .hover-text {
  opacity: 1;
  transition-duration: 1s;
  transition-timing-function: linear;
}

<div class="image-container">
  <img src="http://placehold.it/360x100">
  <div class="hover-text">
    <a href="#">
      <div>Text on hover</div>
    </a>
  </div>
</div>

Answer 2

试试这个，它不在乎图像大小

.image-container{
    position: relative;
    display: inline-block;
}
.image-container .hover-text{
    position: absolute;
    top: 33%;
    width: 100%;
    
    text-align: center;
    visibility: hidden;
}
.image-container:hover .hover-text{
    visibility: visible;
}
/* styling */
.hover-text{
    font-family: sans-serif;
    color: white;
    background: rgba(0,0,0,0.3);
    text-shadow: 1px 1px 1px black;
    
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.hover-text a{
    color: white;
}

<div class="image-container">
    <img src="http://placehold.it/360x100">
    <div class="hover-text">
        Text on hover <a href="#">Link</a> 
    </div>
</div>

Answer 3

跳过了转换内容，但这是您所要求的吗？

div {
    position: relative;
}
img {
    width: 100%;
}
.overlay {
    background: blue;
    color: white;
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
}
a:hover .overlay {
    display: block;
}

JSFIDDLE：http://jsfiddle.net/volzy/hLpLabaz/1/

对于全尺寸覆盖，请执行：

.overlay {
    height: 100%;
    top: 0;
}