当悬停

Question

当我将鼠标悬停在图像上时，我希望图像能够改变颜色（勃艮第），并同时显示文本（与图像有关）。我希望文本和背景颜色整齐地显示在图像上（仅覆盖图像），但是我得到过多的勃艮第覆盖的屏幕（如下图所示）。我创建了一个jsfiddle来显示我遇到的问题。图像也需要具有响应性，因此当悬停时，“悬停”状态为“效果永远只会覆盖图像。

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定位容器获取其内容的尺寸。

预览

小提琴：https://jsfiddle.net/x7cv536d/

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预览

我使用另一个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，然后将 display：inline-block; 添加到#Profile-Picture。

结果： Click to view image

Answer 3

只需将display: table;提交给#Profile-Picture，就可以达到预期效果。

让transition:.6s all;让悬停效果更好。

如果图像响应或者尺寸发生变化，它的效果非常好。

<强> Fiddle

Answer 4

将 id =＆＃34;个人资料图片＆＃34; 移至图片代码。

Answer 5

将div标识为Profile-Picture样式display: inline-block。

#Profile-Picture {
  display: inline-block;
  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;
}

<div id="Profile-Picture">
  <div class="colleague-image">
    <img width="200" height="200" alt="" src="http://lorempixel.com/200/200/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占据整个文档宽度，因为它默认为display: block。

<小时/> 不过，底部仍然存在一个小问题。添加这些规则来修复它：

#Profile-Picture {
  line-height: 0;
}
.colleague-text {
  line-height: 1em;
}

原因是您的勃艮第颜色将覆盖div，其ID为Profile-Picture，这比图像大一点，因为它还包含空格而不仅仅是图像。< / p>

修复后预览：