CSSホバーエフェクトとオーバーレイ

Question

私はその上に透明なオーバーレイを持つ画像を持っています。私が上にホバーすると、背景の画像がぼやけて、オーバーレイが不透明になります。両方のレイヤーが互いに重なっているので、オーバーレイの上に置くと、オーバーレイの不透明度だけが変化します。バックグラウンドでイメージをトリガーするにはどうしたらいいですか？

私の試み：

<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

が.icon要素に:hover動作を設定し、子どもたちを更新するためにdescendant selectorsを使用（.overlayとimg）スタイリング：

変更スタイリング子どもとき、親.icon吊るされた：

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

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

デモ：.icon、.iconの.overlay { -webkit転移：

.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>