title: how do you do this rollover state using CSS
body: <p><a href="http://www.habib-fadel.com/en/artwork/" rel="nofollow">http://www.habib-fadel.com/en/artwork/</a></p>
  
  <p>Please could someone tell me how to do this hover state.</p>
  
  <p>This is my HTML at the moment:</p>
  
  <pre><code> &lt;div class="grid-item"&gt;
     &lt;a href="#"&gt;
       &lt;div class="details"&gt;
         &lt;div class="title"&gt;Portrait VII&lt;/div&gt;
         &lt;div class="icon-cross icon"&gt;&lt;/div&gt;
       &lt;/div&gt;
     &lt;/a&gt;
     &lt;img src="images/1.jpg"&gt;
    &lt;/div&gt;
  </code></pre>