title: image hover effect issue
body: <p>I'm trying to do an effect that when I pass the mouse over on a picture I want to show a black box that appears closing stay only a square in the middle where I want to place an icon of a search icon. </p>
  
  <p>I found a tutorial that explains how to do this, but it explains very lightly. </p>
  
  <p>I am having a problem because I wanted my picture have width:155px; and height:140px;.</p>
  
  <p>But When I give this width and height values in <code>.view {}</code> the square in the middle that I do not want to turn it black disappears, and I want that square visible to put icon search there.
  Maybe I´m not explained myself well, but I think with the jsFiddle you can understand my problem. I wish you could help me, any help is welcome!</p>
  
  <p><strong>My fiddle to better understand:</strong></p>
  
  <p><a href="http://jsfiddle.net/ritz/cQL4S/" rel="nofollow">http://jsfiddle.net/ritz/cQL4S/</a></p>
  
  <p><strong>My html:</strong></p>
  
  <pre><code>&lt;div class="view second-effect"&gt;
      &lt;img src="images/image1.jpg" /&gt;
      &lt;div class="mask"&gt;
         &lt;a href="#" class="info"&gt;Read More&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My css:</strong></p>
  
  <pre><code>.view {
     width: 225px;
     height: 225px;
     margin: 10px;
     float: left;
     border: 5px solid #fff;
     overflow: hidden;
     position: relative;
     text-align: center;
     box-shadow: 0px 0px 5px #aaa;
     cursor: default;
  }
  .view .mask, .view .content {
      width: 225px;
     height: 225px;
     position: absolute;
     overflow: hidden;
     top: 0;
     left: 0;
  }
  .view img {
     display: block;
     position: relative;
  }
  .view a.info {
     background:url(../img/link.png) center no-repeat;
     display: inline-block;
     text-decoration: none;
     padding:0;
     text-indent:-9999px;
     width:20px;
     height:20px;
  }
  
  
  .second-effect .mask {
     opacity: 0;
     overflow:visible;
     border:0px solid rgba(0,0,0,0.7);
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
  }
  .second-effect a.info {
      position:relative;
      top:-10px;
      opacity:0;
     -moz-transform:scale(0,0);
     -webkit-transform:scale(0,0);
     -o-transform:scale(0,0);
     -ms-transform:scale(0,0);
     transform:scale(0,0);
     -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
     -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
     -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
     -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
     transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
  }
  .second-effect:hover .mask {
     opacity: 1;
     border:100px solid rgba(0,0,0,0.7);
  }
  .second-effect:hover a.info {
      opacity:1;
      -moz-transform:scale(1,1);
      -webkit-transform:scale(1,1);
      -o-transform:scale(1,1);
      -ms-transform:scale(1,1);
      transform:scale(1,1);
      -moz-transition-delay:0.3s;
      -webkit-transition-delay:0.3s;
      -o-transition-delay:0.3s;
      -ms-transition-delay:0.3s;
      transition-delay:0.3s;
  }
  </code></pre>
  
  <p><strong>My jsfiddle with the problem:</strong></p>
  
  <p><a href="http://jsfiddle.net/ritz/cQL4S/1/" rel="nofollow">http://jsfiddle.net/ritz/cQL4S/1/</a></p>