Wie setzt man einen Text, der über ein Bild gelegt wird, auf 0, wenn das Bild über dem Bild liegt?

Question

Ok Ich habe versucht, den Text in einem Bereich zu setzen, und wenn das div (bestehend aus dem Bild und dem Text darin) gescrollt wurde, würde die Spannen-Opazität auf 0 gesetzt. Es funktioniert aber nicht, und hier ist mein Code .

HTML

<div id="phild"> 
    <td class="bio"> <img class="bio" src="phil.jpg" /> 
     <span id="phils"><h2 id="philh">Phil</h2></span>  
    </td> 
</div> 

CSS das Bild Opazität zu machen: 1, wenn

schwebte

div#phild :hover{ 
opacity: 1; 
transition: all .2s linear; 
} 

CSS, um den Text Undurchsichtigkeit: 0, wenn die ganze Sache (Bild und Text) über

schwebte ist

div#phild:hover span#phils{ 
opacity:0; 
} 

Answer 1

Wenn der Text auf dem Bild ist, können Sie nicht img:hover für Ihren gewünschten Effekt verwenden, weil, wenn Sie den Cursor auf den Text, es ist nicht so schwebt das nicht registrieren Bild. Sie könnten das Bild und Text in etwas setzen, und haben dann der Text verschwinden, wenn die Eltern

.bio { 
 
    position:relative; 
 
    float:left; 
 
} 
 
.bio img { 
 
    display:block; 
 
} 
 
.bio span { 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    transition: all .2s linear; 
 
} 
 
.bio:hover span { 
 
    opacity:0; 
 
}

<div class="bio"> 
 
    <img src="http://placehold.it/100x100" /> 
 
    <span>Text</span> 
 
</div>

Answer 2

Solange Sie selectors richtig sind, sollte das folgende den ganzen Weg zurück zu IE 6 funktionieren:

img.bio:hover{ 
opacity: 1; /* css standard */ 
    filter: alpha(opacity=100); /* internet explorer */ 
} 

Answer 3

Es gibt eine Reihe von Möglichkeiten, dies zu tun. Angenommen, Ihr Text folgt Ihrem img Element, können Sie die hover Pseudo-Klasse und adjacent sibling selector verwenden, um den Text zu zielen und Ihre CSS anzuwenden.

div { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.bio { 
 
    position: absolute; 
 
    top: 50%; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
img:hover + .bio { 
 
    opacity: 0; 
 
}

<div> 
 
    <img src="http://placehold.it/200x200" /> 
 
    <span class="bio">Text Here</span> 
 
</div>