CSS: Bilduntertitel ausblenden - css

Ich habe ein Bild, dass, wenn Sie darüber schweben, eine verblassende Bildunterschrift erscheint

Hier ist das Jüngste

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

Ich möchte es jedoch so aussehen:

Ich denke, es hat mit diesem Teil zu tun, aber ich bin nicht sicher, wie ich es genau formatieren soll. Irgendwelche Ratschläge / Hilfe wären dankbar. Danke!

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

Antworten:

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

Sie müssen immer noch mit einigen Rändern, Textschriftarten und -größen herumspielen, um die genaue Übereinstimmung zu erhalten.

du darfst verwenden figcaption wie 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="/images/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>

Wenn Elemente absolut positioniert werden, ist es immer eine gute Idee, ein bisschen Flexibilität zu integrieren. Das Problem mit Ihrem Code besteht darin, dass Sie versuchen, das Element vertikal zu zentrieren, indem Sie das Element schätzen top und left Wert in Prozent, was nicht so flexibel ist: Was ist, wenn die Bilder in der figure Element haben unterschiedliche Größen und Seitenverhältnisse? Wenn dies der Fall ist, funktionieren diese geschätzten Prozentsätze nicht in allen Fällen und erfordern möglicherweise eine manuelle Änderung des Werts für jedes Bild.

In dem von Ihnen vorgestellten Beispiel sieht es so aus, als ob die height des übergebenen Elements wird durch seinen eigenen Inhalt bestimmt, anstatt ein bestimmtes festgelegt zu haben height wie in Ihrem Code.

Beispiel 1 (height bestimmt durch den Inhalt innerhalb) arbeitet mit Browsern ab IE9 und höher:

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

Beispiel 2 (Fest height) sollte in allen Browsern funktionieren:

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 nicht allzu ferner Zukunft muss Flexbox die bevorzugte Methode sein, da alle Berechnungen für Sie durchgeführt werden.