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