CodePen

HTML

            
              <div class="wrap">  
  <a href="http://thenerdary.net">
    <div class="product-image">
      <img src="http://placekitten.com/300" alt="" />
    </div>
    <div class="product-hover">
      <h2>Bundle of cats</h2>
      <p>So much meow! Be sure to buy one today!</p>
    </div>
  </a>
</div>

      
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  font: 1em/1.2 arial;
  padding: 2em;
}

h1 {
  margin-bottom: 1em;
  text-transform: uppercase;
}

.wrap {
  min-height: 400px;
  color: #000;
}

a {
  display: block;
  width: 300px;
  min-height: 300px;
  border: 5px solid #333;
  position: relative;
  .hover-on & {
    &:focus, &:hover {
      .product-hover {
          opacity: 1;
       }
    }
  }
}

img {
  display: block;
}

.product-hover {
  //Display for all (including touch) devices by default
  opacity: 1;
  position: absolute;
  left: 15px;
  top: 15px;
  color: #fff;
  width: 270px;
  -webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;;
	transition: opacity 0.2s linear;
  
  .hover-on & {
    //Hide after mousemove fires
    opacity: 0;
  }
  
  h2 {
    text-transform: uppercase;
  }
  h2, p {
    padding: 5px;
    background: #000;
    margin-bottom: 20px;
    display: inline-block;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
                              
$(document).bind('mousemove.hoverTest', function() {
   $('div.wrap').addClass('hover-on');
});

$(document).on('touchstart', function(e) {
		$(document).unbind('mousemove.hoverTest');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................