CSS：淡入淡出的图像标题

我有一张图片，当你在上面悬停时，会出现一个褪色的标题

这是小提琴

但是，我希望它看起来像这样：

我认为这与这部分有关，但我不确定如何准确地格式化它。如有任何建议/帮助，将不胜感激。谢谢

figcaption {
  position: absolute;
  top:35%;
  width: 80%;
    height:50%;
  left:10%;
  font-size: 14px;
  color: white;
  background-color: #9F8F53;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
 transition: opacity .5s ease-in-out;
}

试试这个

---

您仍然需要使用一些边距、文本字体和大小来获得精确匹配。

您可以使用

figcaption

作为

flex

容器

图{
位置：相对位置；
显示：块；
利润率：5px 0 10px 0；
宽度：350px；
}
菲卡普顿{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
显示器：flex；
字体大小：14px；
颜色：白色；
}
figcaption>div{
背景色：#9F8F53；
不透明度：0；
-webkit过渡：不透明度。5s易入易出；
-moz过渡：不透明度。5s缓进缓出；
-o型过渡：不透明度。5s缓进缓出；
过渡：不透明度。5s缓进缓出；
保证金：自动；
文本对齐：居中；
宽度：80%；
}
图：悬停飞行舱{
不透明度：0.7；
}
.产品名称

lorem ipsum

$50.00

绝对定位元素时，最好结合一点灵活性。代码的问题是，您试图通过估计

顶部

和

左侧

的百分比值来垂直居中元素，这不是很灵活：如果

图形

元素中的图像具有不同的大小和纵横比，该怎么办？如果是这样，这些估计百分比将不会在每个实例中都起作用，并且可能需要您手动更改每个图像的值

在您当前的示例中，似乎转换元素的

高度

是由其自身的内容决定的，而不是像您的代码中那样设置了特定的

高度

（

height

由内部内容决定）适用于IE9及以上版本的浏览器：

figcaption {
  position: absolute;
  top: 50%; /* Always 50% from the top */
  transform: translateY(-50%); /* Extracting half of the content height to vertically center */
  width: 80%;
  left: 0;
  right: 0;
  opacity: 0;
  margin: 0 auto;
  font-size: 14px;
  padding: 1em;
  color: white;
  background: rgba(194, 145, 57, 0.7); /* Use semitransparent background instead of opacity for readability reasons */
  transition: opacity .5s;
}

figure:hover figcaption {
  opacity: 1;
}

（固定的

高度

）应适用于所有浏览器：

figcaption {
  position: absolute;
  height: 50%; /* Fixed height */
  width: 80%;
  top: 0; /* Filling the whole space with top, left, bottom, right */
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  margin: auto; /* Using margin: auto; the space around is distributed evenly */
  font-size: 14px;
  padding: 1em;
  color: white;
  background: rgba(194, 145, 57, 0.7);
  transition: opacity .5s;
}

在不久的将来，Flexbox将成为首选方法，因为它可以为您完成所有计算

figcaption {
  position: absolute;
  height: 50%; /* Fixed height */
  width: 80%;
  top: 0; /* Filling the whole space with top, left, bottom, right */
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  margin: auto; /* Using margin: auto; the space around is distributed evenly */
  font-size: 14px;
  padding: 1em;
  color: white;
  background: rgba(194, 145, 57, 0.7);
  transition: opacity .5s;
}