title: How to make :hover effect in a responsive thumbnails gallery
body: <p>I'm trying to make a <code>:hover</code> effect like <a href="http://studionudge.com/work" rel="nofollow">http://studionudge.com/work</a>.</p>
  
  <p>I have three thumbnails, each with a width of 30% and 5% margin. Because of the percentages I have no fixed width and it's a lot harder to make it work. I can't make the hover appear or center the text.</p>
  
  <p>Is that possible? </p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="thumnails"&gt;
    &lt;div class="thumb1"&gt;
      &lt;div id="mask"&gt;
        &lt;div class="thumb-title"&gt;&lt;h3&gt;Project title&lt;/h3&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;img src="images/work.jpg"&gt;
    &lt;/div&gt; 
  &lt;/div&gt;&lt;!-- #thumbnails --&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#thumbnails {
    border-bottom: 1px solid #b2b2b2;
    overflow: hidden;
  }
  
  #thumb1 {
    width: 30%;
    height: auto;
    margin-right: 5%;
  }
  
  #mask {
    position: absolute;
    background-color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
  }
  
  #thumb1:hover #mask {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
  }
  
  #thumb1 img {
    max-width: 100%;
    height: auto;
  }
  
  .thumb-title {
    position: absolute;
    text-align: center;
    margin-top: 150px;
  }
  </code></pre>