CSS3 hover effects don't work on mobile browsers

Question

I have the following set up on my site. However, when using a mobile browser, I can't get the description to fade in on touch/hover. Is there a way I can alter the code below so I can have the same behavior on a mobile browser?

JSFiddle here: http://jsfiddle.net/CJNgb/

HTML

<article class="project">
  <div class="thumbnail view">
    <img src="http://lorempixel.com/output/people-q-c-292-292-9.jpg" />
    <section class="description">
      <hgroup>
        <h2>Title</h2>
        <h3>Identity, Illustration, Web</h3>
      </hgroup>
      <p>Description of project.</p>
      <a class="screenshot single-image" href="http://lorempixel.com/output/nightlife-q-c-700-700-4.jpg"></a>
        <span><a href="http://test.com" target="_blank">Visit website</a>   <a href="http://test.com/read-more">View more</a></span>
    </section>
  </div>
</article>

CSS

body {
color: #666;
font: 11px/1.5 helvetica,arial,sans-serif;
}
a { font-weight:bold;text-decoration:none }
.project {
background: #fff;
border: 1px solid #e5e5e5;
float: left;
height: 292px;
margin: 0 20px 20px 0;
overflow: hidden;
padding: 3px;
position: relative;
top: auto;
width: 292px;
}
.project .thumbnail {
   float: left;
   overflow: hidden;
   cursor: default;
   background: #f4f3f1;
    width:292px;
    height:292px;
}
.project .description {
   width: 252px;
   height:252px;
   position: absolute;
   top: 3px;
   left: 3px;
   padding:20px;
}
.project .description span a {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 150ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 150ms;
background: #fff;
border: 1px solid #dedede;
color: #222 !important;
display: block;
float: left;
margin: 10px 10px 0 0;
padding: 10px 15px;
}
.screenshot {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 150ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 150ms;
background: url("http://i.imgur.com/fEoN3s9.png") no-repeat scroll 0 0 transparent;
background-size: 37px 46px;
display: block;
height: 46px;
position: absolute;
right: 20px;
top: 20px;
width: 37px;
}
.thumbnail img {
   display: block;
   position: relative;
}
.thumbnail h2 {
   margin-bottom:5px;
   padding-bottom:0;
}
.project .description h3 {
   border-bottom:1px solid #dedede;
   color: #666;
   font-size:1em;
   margin-bottom: 15px;
   padding-bottom: 15px;
}
.project .description a {
   color: #ea641c;
}
.view img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: #f4f3f1;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view hgroup {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view:hover .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view:hover hgroup,
.view:hover p,
.view:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}   

Edit: Adding this line made this work on mobile! document.addEventListener("touchstart", function() {},false);

Answer 1

You can rely on this javascript solution:

Zepto

View JsFiddle
View Live Demo

First, download Zepto.js. It's a very light library, which is focused on mobile browsers. For the touch event you will also need the Zepto module touch.js, included in the Zepto src folder.

So all we need is these two files:
+ zepto.js (minified+gzipped: 9.7k)
+ touch.js (non-minified/non-gzipped: 4k)

Zepto supports the following touch events:

• tap — fires when the element is tapped.
• singleTap and doubleTap — this pair of events can be used to detect both single and double taps on the same element (if you don’t need double tap detection, use tap instead).
• longTap — fires when an element is tapped and the finger is held down for more than 750ms.
• swipe, swipeLeft, swipeRight, swipeUp, swipeDown — fires when an element is swiped (optionally in the given direction)

NEW CODE:

---

HTML/JS

<body>
<article class="project">
  <div class="thumbnail view">
    <img src="http://lorempixel.com/output/people-q-c-292-292-9.jpg" />
    <section class="description">
      <hgroup>
        <h2>Title</h2>
        <h3>Identity, Illustration, Web</h3>
      </hgroup>
      <p>Description of project.</p>
      <a class="screenshot single-image" href="http://lorempixel.com/output/nightlife-q-c-700-700-4.jpg"></a>
        <span><a href="http://test.com" target="_blank">Visit website</a>   <a href="http://test.com/read-more">View more</a></span>
    </section>
  </div>
</article>

<script src="zepto.js"></script>
<script src="touch.js"></script>
<script>
$('.view').tap(function(){
    if( $(this).hasClass('view-tap') ) {
        $(this).removeClass('view-tap')
    } else {
        $(this).addClass('view-tap')
    }
})

// Prevent any link click, when tap on image
$('.view a').on('click', function(e) {
    if( !$('.view').hasClass('view-tap') ) {
        e.preventDefault()
    }
})
</script>
</body>

---

CSS (Only the replaced part: Added .view-tap next to each .view:hover)

.view:hover img, .view-tap img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view:hover .description, .view-tap .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view:hover hgroup, .view-tap hgroup,
.view:hover p, .view-tap p,
.view:hover a.info, .view-tap a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view:hover p, .view-tap p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view:hover a.info, .view-tap a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

The advantage of this approach is that you don't have to worry for cross-browser compatibility and if you need more mobile features in the future, it's just easy to implement them.