title: Make a div slide up on click and hover using css3 transitions
body: <p>I was wondering if someone can help me. I would like to create an on click and hover effect that brings up a div over another div as a sort of overlay. I would preferably like to use css3 transitions but if i have to do it with jquery i will do.</p>
  
  <p>I have found a few things online such as <a href="http://jsfiddle.net/UezUj/1/" rel="noreferrer">http://jsfiddle.net/UezUj/1/</a> however this is more of a slide toggle effect and it goes the wrong way. I would like to create something like <a href="http://www.ashtonsmith.co.uk/" rel="noreferrer">http://www.ashtonsmith.co.uk/</a> (if you hover over distribution and logistics) but where the title slides up to reveal the content.</p>
  
  <pre><code>        &lt;div class="col-md-4 box__industries"&gt;
                  &lt;div&gt;
                  &lt;div class="image fill"&gt;
  
              &lt;img src="http://lorempixel.com/g/400/200/" width="363"   height="159"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="content"&gt;
                    &lt;h5&gt;Title&lt;/h5&gt;
                     This is my content
                  &lt;/div&gt;
  
                  &lt;/div&gt;
                &lt;/div&gt;    
  </code></pre>
  
  <p>I would like the div .content to slide up over the image on click and on hover.</p>
  
  <p>thanks in advance.</p>