CSS：图片标题逐渐褪色

Question

I have a picture that when you hover over it, a fading caption would appear

Here is the jfiddle

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

I want it to look like this however:

I think it has to do with this part but I'm not sure how to exactly format it. Any advice/help would be appreciated. Thanks!

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

Try this one 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;
}
}

You would still need to play around with some margins, text fonts and sizes to get the exact match.

Answer 2

you may use figcaption as flex container 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

When positioning elements absolutely it is always a good idea to incorporate a bit of flexibility. The issue with your code, is that you try to vertically center the element by estimating the top and left value in percentages, which isn't that flexible: What if the images inside the figure element have different sizes and aspect ratios? If so, these estimated percentages will not work in every instance and would potentially require you to manually change the value with each image.

In the example you present, it looks as if the height of the transitioned element is determined by its own content, rather than having set a specific height as in your code.

Example 1 ( height determined by the content inside) works with browsers from IE9 and up:

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

Example 2 (fixed height ) should work in all browsers:

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

In the not-too-distant future Flexbox has to be the preferred method, as it does all the calculations for you.