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);

Took me 20 seconds to find this: http://stackoverflow.com/questions/6063308/touch-css-pseudo-class-or-something-similar — m.spyratos, Apr 15 '13 at 04:02
@m.spyratos Took me a few minutes to figure out most given answers were rather ... hacky. — JayC, Apr 15 '13 at 04:07
Yup... That's the way! :) Otherwise consider using javascript — m.spyratos, Apr 15 '13 at 04:10
Ok, I added this line `document.addEventListener("touchstart", function() {},false);` and it works but it works too similarly meaning I have to have my finger held down in order to view the description. Is there a way I can just have it flip to the description on touch? — J82, Apr 15 '13 at 04:20
just build a trigger saver, which means, hold the touchstate in a boolean variable of your choice and later you could use it to fall back to the state before. pur javascript has a nice effort, its not so quick changing like all the API do the moment. And it is nicely working with API if you wish to add one in your project, whatever API you choose — Ol Sen, Apr 15 '13 at 04:56

m.spyratos · Accepted Answer · 2013-04-16T01:33:59.650

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.

Strange. I did it exactly how you did it but the tapping still doesn't work when I'm using a mobile browser. The description doesn't even show up together. — J82, Apr 15 '13 at 09:10
Please check my updated answer. I took the time and tested it and it seems to be working now (I simulated the touch event on Chrome). Notice that `Zepto` uses a second js file called `touch.js` for touch events. — m.spyratos, Apr 15 '13 at 17:52
I think it has conflict with JQuery, when I use both of these libraries together,I get this error, $()...tap is not a function, and I think it's because of having common symbol like $ — Ethan.R, Dec 29 '18 at 14:31
@Ehsan Aghaei Zepto is based off of jQuery. If you already use jQuery you shouldn’t need to load Zepto. Give a try to the above example using jQuery. — m.spyratos, Dec 29 '18 at 18:09

CSS3 hover effects don't work on mobile browsers

1 Answers1