title: Overlaying effect for multiple pictures
body: <p>I've got <a href="http://jsfiddle.net/L7XCD/764/" rel="nofollow">this</a> code, which works for a single picture.
  Nevertheless I wasn't able to figure out, how to adjust the code to make it work, when I'd like to have the same effect for n pictures. Does anybody have any idea, how to generalize this css? Or do I have to use different approach?</p>
  
  <pre><code>.cat-image,
  .cat-image img {
      width: 400px;
      height: 400px;    
  }
  
  .top {
      position: relative;
      opacity: 0;
  
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out; 
  }
  
  .top .text,
  .top button {
      position: absolute;
  }
  
  .top .text {
      bottom: 40px;
      left: 30px;
  }
  .top button {
      bottom: 10px;
      left: 30px;
  }
  
  .top:hover {
      opacity: 1;
  }
  
  .bottom {
      position: absolute;
      top: 0;
  }
  </code></pre>