Text bei Hover anzeigen

Question

Ich versuche, mein <h2> Element zu verbergen, bis der Benutzer über das Bild schwebt.

Wenn der Benutzer den Cursor über das Bild bewegt, wird das Wort "Drinks" über dem Bild angezeigt. Ich möchte, dass der Text auch über dem Bild zentriert ist.

Kann mir jemand zeigen, wie dies in CSS erreicht wird?

Demo: https://jsfiddle.net/hj3xrumo/

li { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0 
 
} 
 

 
li h2 { 
 
    position: relative; 
 
    top: 0; 
 
}

<h1> 
 
    Test 
 
</h1> 
 

 
<li class="product-category product first"> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/370x370" alt="Drinks" width="370" height="370" /> 
 
    <h2 class="woocommerce-loop-category__title">Drinks</h2> 
 
    </a> 
 
</li>

Answer 1

Verwenden position: absolute;display:none; zu h2 verwendet und es display: block machen auf img:hove

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    display:inline-block; 
 
} 
 

 
li h2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    display: none; 
 
    margin:0; 
 
} 
 

 
li a:hover h2 { 
 
    display: block 
 
}

<ul> 
 
    <li class="product-category product first"> 
 
    <a href="#"> 
 
     <img src="http://placehold.it/370x370" alt="Drinks" width="370" height="370" /> 
 
     <h2 class="woocommerce-loop-category__title">Drinks</h2> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 2

Dieses

h2{ 
    display:none; 
} 
img:hover ~ h2{ 
    display:block; 
} 

Aktualisiert Geige (https://jsfiddle.net/hj3xrumo/1/).

Answer 3

Verwendung img + h2 + ist für das nächste Kind

li { 
 
list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
li h2 { 
 
    position:relative; 
 
    top:0; 
 
} 
 
.woocommerce-loop-category__title{ 
 
display:none; 
 
} 
 
img:hover + .woocommerce-loop-category__title{ 
 
display:block; 
 
position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    transform: translateY(-50%); 
 
}

<h1> 
 
Test 
 
</h1> 
 

 
<li class="product-category product first"> 
 
\t <a href="#"> 
 
\t \t <img src="http://placehold.it/370x370" alt="Drinks" width="370" height="370" /> 
 
\t \t <h2 class="woocommerce-loop-category__title">Drinks</h2> 
 
\t </a> 
 
</li>

Answer 4

prüfen dies funktionieren wird

li {list-style-type:none;padding:0;margin:0;width:370px;height:370px;position:relative;} 
 
li a h2{ 
 
position:absolute; 
 
top:40%; 
 
left:40%; 
 
trasnform:translate(-50%,-50%); 
 
text-align:center;} 
 
.imgbox:hover + h2{ 
 
    visibility:hidden 
 
}

<li class="product-category product first"> 
 
\t <a href="#"> 
 
\t \t <img src="http://placehold.it/370x370" alt="Drinks" class="imgbox" width="370" height="370" /> 
 
\t \t <h2 class="woocommerce-loop-category__title">Drinks</h2> 
 
\t </a> 
 
</li>