悬停时如何使文字和背景颜色出现在图像上？

Question

我想要一个图像改变颜色(勃艮第)时，我悬停在它之上，并在同一时间显示文本(这与图像)。我希望文本和背景颜色能清晰地显示在图像上(仅覆盖图像)，但我得到太多的屏幕覆盖勃艮第(如下图所示)。我制造了一个小提琴手，说明了我的问题所在。图像也需要响应，所以当悬停时，“悬停”效果总是覆盖图像。

https://jsfiddle.net/cardiffsteve/hnow7yxp/

<div id="Profile-Picture">
  <div class="colleague-image">
    <img width="200" height="200" alt="" src="http://lorempixel.com/100/100/cats/">
  </div>
  <div class="colleague-text">
    <div class="colleague-name">Mr Big </div>
    <div class="colleague-job-title">The Boss </div>
    <div class="colleague-qualifications">Top Cat</div>
  </div>
</div>

#Profile-Picture {
  position: relative;
}

.colleague-text {
  position: absolute;
  top: 10px;
  left: 20px;
  bottom: 0;
  right: 0;
  background: rgba(142, 1, 60, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}

#Profile-Picture:hover .colleague-text {
  visibility: visible;
  opacity: 1;
}

​

​

Answer 1

将inline-block交给#Profile-Picture

#Profile-Picture {
  position: relative;
  display: inline-block;
}

这将使relative定位容器获取其内容的维度。

预览：

​

​

Fiddle: https://jsfiddle.net/x7cv536d/

另一种尝试是使文本的中间垂直和水平对齐：

​

#Profile-Picture {
  position: relative;
  display: inline-block;
}

.colleague-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(142, 1, 60, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}

.colleague-text .center {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 0; right: 0;
  width: 100%;
}

#Profile-Picture:hover .colleague-text {
  visibility: visible;
  opacity: 1;
}

img {
  display: block;
  line-height: 1;
}

<div id="Profile-Picture">
  <div class="colleague-image">
    <img width="200" height="200" alt="" src="http://lorempixel.com/100/100/cats/">
  </div>
  <div class="colleague-text">
    <div class="center">
      <div class="colleague-name">Mr Big </div>
      <div class="colleague-job-title">The Boss </div>
      <div class="colleague-qualifications">Top Cat</div>
    </div>
  </div>
</div>

​

预览：

​

​

我使用了另一个div作为支架，用于垂直对中。:)

Answer 2

这对我起了作用：

#Profile-Picture {
  position: relative;
  display: inline-block;
}
.colleague-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(142, 1, 60, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}

编辑:设置顶部和左到0，并添加显示:内联块；到#配置文件-图片.

结果：单击以查看图像

Answer 3

只需将display: table;交给#Profile-Picture就可以实现您的期望。

给transition:.6s all;使悬停效果很好。

如果图像是有反应的，或者它的大小变化，它的工作原理是完美的。

小提琴