title: 2 divs hover effect, one img blur, other one text hover
body: <p>when I move my mouse over a picture it should blur (via CSS) and at the same time it should appear a text. So far, so good, but when I move my mouse on the image where actually the (still invisible) text is, only the text appears, but the image isn't going to be blurred.</p>
  
  <p><a href="http://jsfiddle.net/u8eY7/" rel="nofollow">http://jsfiddle.net/u8eY7/</a></p>
  
  <p>My Code:</p>
  
  <pre><code>    &lt;li&gt;&lt;div id="blurbox"&gt;&lt;div class="blur img"&gt;&lt;div class="img-wrap"&gt;&lt;div class="img-info"&gt;
                   Wilkinson &lt;br /&gt;
                   Afterglow &lt;br /&gt;
                   RAM Records &lt;br /&gt;
                   13.&lt;/div&gt;
                &lt;img src="images/cover/01-wilkinson-afterglow.png" class="hover" width="168" height="168"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="caption"&gt;
  
      .blur img {
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
      transition: 1s all;
      overflow: hidden;
      position: relative;
      z-index:11;
  }
  
  
      .blur img:hover {
          -webkit-filter: blur(18px);
          overflow: hidden;
          width: 168px;
          height: 168px;
          position: relative;
          border:3px solid white;
          opacity: 0.6;
          z-index:11;
      }
  
      .blur img:hover .img-info {
          -webkit-filter: blur(18px);
          overflow: hidden;
          width: 168px;
          height: 168px;
          position: relative;
          border:3px solid white;
          opacity: 0.6;
          z-index:11;
      }
  
      .img-wrap{
          height:168px;
          overflow:hidden;
          position:relative;
          width:168px;
      }
      .img-info{
          bottom:0;
          color:#fff;
          opacity:0;
          filter: alpha(opacity = 0);
          position:absolute;
          width:100%;
      z-index:12;
      line-height: 32px;
      font-size: 26px;
      font-family: "Helvetica Neue";
      text-align: left;
      padding-left: 10px;
      padding-bottom: 18px;
      text-shadow: 0px 1px 2px rgba(150, 150, 150, 1);
  }
  .img-info h4, .img-info p{
  padding:0 0px;
  }
  .img-wrap:hover .img-info{
      opacity:0.75;
      filter: alpha(opacity = 75);
      transition:opacity 1.75s;
      -moz-transition:opacity 1.75s;
      -webkit-transition:opacity 1.75s;
  }
  </code></pre>