CSS hover effects & overlays

Question

I have a picture with an transparent overlay on top of it. If i Hover above it, I want the image in the background to blur and the overlay to become opaque. Since both layers are on top of each other, only the opacity of the overlay changes when I hover it. How can I trigger the image in the background?

My attempt:

<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

Set the :hover behavior on the .icon element, and use the descendant selectors to update the children (.overlay and img) styling:

change the children styling when their parent .icon is hovered:

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