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

设置元素的:hover行为.icon,并使用后代选择器更新子项(.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>