CSS：淡化图像标题

Question

我有一张照片，当你将鼠标悬停在它上面时，会出现一个渐弱的标题

这是jfiddle

https://jsfiddle.net/e9dwbdyn/4/

我希望它看起来像这样：

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

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

Answer 1

试试这个https://jsfiddle.net/e9dwbdyn/6/

figure {
  position: relative;
  display: block;
  margin: 5px 0 10px 0;
    width:350px;
}

figcaption {
  position: absolute;
  top:30%;
  width: 80%;
  height:40%;
  left:10%;
  font-size: 20px;
  font-family: "Arial, Helvetica, sans-serif";
  text-align: center;
  color: white;
  background-color: #000;
  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;
}

figure:hover figcaption {
  opacity: 0.5;
}

.product-name a {
    color: #fff;
}

.product-name a:hover {
    color: #fff
}

.product-name, .desc_grid, .price {
 padding: 0px;
    margin: 0px;
}
}

你仍然需要使用一些边距，文本字体和大小来获得完全匹配。

Answer 2

您可以将figcaption用作flex容器 https://jsfiddle.net/e9dwbdyn/5/

figure {
    position: relative;
    display: block;
    margin: 5px 0 10px 0;
    width:350px;
}
figcaption {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:flex;
    font-size: 14px;
    color: white;
}
figcaption>div {
    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;
    margin:auto;
    text-align:center;
    width:80%;
}
figure:hover figcaption div {
    opacity: 0.7;
}
.product-name

<figure>
    <img src="https://goodnessofgodministries.files.wordpress.com/2012/03/bugia_candlestick_.jpg" alt="Candlesticks" style="width:350px" />
    </a>
    <figcaption>
        <div class="product-shop">
            
<h3 class="product-name"><a href="" title="Candlesticks">Candlesticks</a><span class="over"></span></h3>

            <p class="desc_grid">lorem ipsum</p>
            <div class="price-box">
<span class="regular-price" id="product-price-3-new">
<span class="price">$50.00</span></span>
            </div>
        </div>
    </figcaption>
</figure>

Answer 3

绝对定位元素时，最好采用一点灵活性。您的代码存在的问题是，您尝试通过估算百分比中的top和left值来垂直居中元素，这不是那么灵活：如果{{{{}内的图像怎么办？ 1}}元素有不同的大小和宽高比？如果是这样，这些估计的百分比将不会在每个实例中都有效，并且可能需要您手动更改每个图像的值。

在您提供的示例中，看起来过渡元素的figure由其自己的内容决定，而不是像您的代码中那样设置特定的height。

Example 1（height由内容确定）适用于IE9及以上版本的浏览器：

height

Example 2（已修复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; } ）应适用于所有浏览器：

height

在不太遥远的未来，Flexbox必须成为首选方法，因为它会为您完成所有计算。