title: how to deal with hover effect on touch devices
body: <p>i have following code</p>
  
  <pre><code>&lt;div&gt;
      &lt;img src="http://placehold.it/350x150"/&gt;
      &lt;div class="link-cont"&gt;&lt;a href="#"&gt;click here to see more info&lt;/a&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  
  div {
      width: 350px;
      font-size:12px;
      position: relative;    
  }
  div img{
      padding:0 10px;    
  }
  .link-cont {
      background: red;
      position: absolute;
      bottom: 0;
      width: 370px;
      height: 210px; 
      opacity: 0;
      transition: all 0.4s;
      z-index: -1
  }
  div:hover  .link-cont {
      opacity: 1; 
      bottom:-40px;
  }
  .link-cont a{    
      opacity: 0;  
  }
  div:hover  .link-cont a{
      position: relative; 
      opacity: 1; 
      bottom:-175px;
      left:10px;
      background:#fff;
      color:red;
      text-decoration:none;
      padding:0 10px;
  }
  </code></pre>
  
  <p>A link is wrapped inside a div which appears on hover. how do i make this touch device friendly. </p>
  
  <p>jsfidd--> <a href="http://jsfiddle.net/yeyene/Nnd7w/17/" rel="nofollow">http://jsfiddle.net/yeyene/Nnd7w/17/</a></p>