title: CSS on hover show content
body: <p>I'm kicking myself here as I've done this plenty of times before, but for some reason my code is not working and I can't workout why. I've been staring at it for a while now so that probably doesn't help. Anyway I'm trying to do a CSS on hover. So when you hover over a div with it displays another div.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="pressListItem"&gt;
     &lt;img src="" width="" height=""&gt;
     &lt;h3&gt;July 2013&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="pressItemHover"&gt;
     &lt;p&gt;This is come more content, lalala here is a little snippet&lt;/p&gt;
     &lt;span&gt;&lt;/span&gt;
     &lt;span&gt;Read more&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong> </p>
  
  <p>I'm using the opacity transition as I want it fade in.</p>
  
  <pre><code>.pressItemHover{
      opacity: 0;
      transition: opacity 0.5s linear 0s;
      visibility: hidden; 
  }
  
  .pressListItem:hover .pressItemHover{
      opacity: 1;
      visibility: visible;
  }
  
  .pressListItem{
      width: 200px;
      float: left;
      height: 200px;
      margin-right:12px;
      text-align: center;
      border: solid 1px #e4e4e4;      
  }
  </code></pre>
  
  <p>If anyone could point out what I'm doing wrong it would be much appreciated!</p>