Question

我知道如果高度和宽度是固定的，如何将文字悬停在图像上。但我有一个响应滑块（猫头鹰滑块），并希望添加链接（简单 - 是的。）和蓝色叠加，其中包含白色文本和从叠加层的简单淡入/滑动过渡。

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

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

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

通常我会选择纯粹的css方法，将.overlay的高度和宽度设置为图像大小，并设置悬停时的可见性。但是..那不会起作用，因为宽度＆amp;高度将不同于视口到视口。所以，你会建议什么？

Answer 1

试试这个，它不关心图像大小

.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 2

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

然后，您将position:absolute应用于子容器（重叠）.hover-text并设置所有偏移量（left，right，top和{{1 }}）为零，这将强制叠加层匹配图像的大小。

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

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

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

你也可以使用CSS变换进行翻译，这也是可行的，因为现代浏览器支持变换（特别是在2D中）。

＆＃13;

vertical-align: middle

＆＃13;

.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;
}

＆＃13;

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;
}

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

3 个答案: