CSS Hover Effekte & Overlays

Question

Ich habe ein Bild mit einer transparenten Überlagerung darüber. Wenn ich darüber schweben, möchte ich, dass das Bild im Hintergrund verschwimmt und das Overlay undurchsichtig wird. Da beide Ebenen übereinander liegen, ändert sich nur die Deckkraft der Überlagerung, wenn ich sie schwebe. Wie kann ich das Bild im Hintergrund auslösen?

Mein Versuch:

<a class="icon" href="nettebad.html" > 
     <img src="./web/nettebad1.jpg" width="300" height="250" /> 
     <div class="overlay"> 
      <h3>Lorem ipsum...</h3> 
     </div> 
    </div> 

.icon { 
    position: relative; 
    text-align: center; 
    float: left; 
    width: 23%; 
    height: 200px; 
    margin-left: 10px; 
    -webkit-transition: all 0.5s ease-in-out; 
    text-align: center; 
    text-decoration: none; 
} 

.icon .overlay { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    width: 290px; 
    height: 240px; 
    text-align: center; 
    opacity: 0; 
    display: block; 
    color: black; 
} 

.icon .overlay:hover { 
    opacity: 1; 
} 

.icon img:hover { 
    -webkit-filter: blur(2px); 
} 

Answer 1

das :hover Verhalten auf dem .icon Element Set, und verwenden Sie die descendant selectors die Kinder zu aktualisieren (.overlay und img) Styling:

Änderung der Styling Kinder, wenn ihre Eltern .icon ist schwebend:

.icon:hover .overlay { 
    opacity: 1; 
} 

.icon:hover img { 
    -webkit-filter: blur(2px); 
} 

Demo:

.icon { 
 
    position: relative; 
 
    text-align: center; 
 
    float: left; 
 
    width: 23%; 
 
    height: 200px; 
 
    margin-left: 10px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 

 
.icon .overlay { 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    width: 290px; 
 
    height: 240px; 
 
    text-align: center; 
 
    opacity: 0; 
 
    display: block; 
 
    color: black; 
 
    transition: inherit; 
 
} 
 

 
.icon img { 
 
    transition: inherit; 
 
} 
 

 
.icon:hover .overlay { 
 
    opacity: 1; 
 
} 
 

 
.icon:hover img { 
 
    -webkit-filter: blur(2px); 
 
}

<a class="icon" href="nettebad.html"> 
 
    <img src="http://data.whicdn.com/images/193303321/superthumb.jpg" width="300" height="250" /> 
 
    <div class="overlay"> 
 
    <h3>Lorem ipsum...</h3> 
 
    </div> 
 
</a>