CSS3 Transition :hover effect reverse animation after a time

Question

I have a CSS transition that enlarges images on hover, however I would like the hover effect to simply deactivate after a certain amount of time. The reason is that the hover effect activates on mobile devices through clicking, but it never deactivates even if you click somewhere else on the screen, unless you click on another image or link which then activates that hover event. Here is my CSS:

.effectfront {
  border: none;
  margin: 0 auto;
}
.effectfront:hover {
  -webkit-transform: scale(12);
  -moz-transform: scale(12);
  -o-transform: scale(12);
  transform: scale(12);
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  padding: 2px;
  background: rgba(0,0,0,0.5);
  border:1px solid rgba(0,0,0,1);
}

 <body><img class="effectfront" style="width:50px" src="https://sharetribe.s3.amazonaws.com/images/listing_images/images/100255/big/b4b8ry-cuaav_os.jpg?1427485186"style=height:80%> </body>

Is there a workaround using just CSS? Or would Javascript be required?

By the way here is the page I am using it on: http://de-fine-art.com/gamemobile — Michael Aaron Wilson, May 03 '15 at 15:39
more about `:hover` - http://stackoverflow.com/questions/23508598/css-hover-on-mobile-or-other-device-as-toggle — Vitorino fernandes, May 03 '15 at 16:50

score 0 · Answer 1 · answered May 03 '15 at 15:49

Set the transition in your .effectfront-class

.effectfront {
  border: none;
  margin: 0 auto;
 -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -o-transition: all 0.5s ease; /* IE 9 */
    -ms-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}
.effectfront:hover {
  -webkit-transform: scale(12);
  -moz-transform: scale(12);
  -o-transform: scale(12);
  transform: scale(12);
  padding: 2px;
  background: rgba(0,0,0,0.5);
  border:1px solid rgba(0,0,0,1);
}

 <body><img class="effectfront" style="width:50px" src="https://sharetribe.s3.amazonaws.com/images/listing_images/images/100255/big/b4b8ry-cuaav_os.jpg?1427485186"style=height:80%> </body>

sergdenisov · Answer 2 · 2015-05-04T13:43:50.440

You could use @keyframes (http://jsfiddle.net/sergdenisov/ksfuhors/3/):

.effectfront {
    border: none;
    margin: 0 auto;
}

.effectfront:hover {
    padding: 2px;
    -webkit-animation: myscale 2s 1;
    animation: myscale 2s 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 1);
}

@-webkit-keyframes myscale {
    0%   { -webkit-transform: scale(1); }
    25%  { -webkit-transform: scale(12); }
    90%  { -webkit-transform: scale(12); }
    100% { -webkit-transform: scale(1); }
}

@keyframes myscale {
    0%   { transform: scale(1); }
    25%  { transform: scale(12); }
    90%  { transform: scale(12); }
    100% { transform: scale(1); }
}

But I think it's strange behavior.

Updated.

To understand the problem with iOS browsers, read this article — http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html.

If you need to close scaled image when user clicks/taps on any other element on the page, I suggest 2 simple solutions:

1. Add cursor: pointer for iOS browsers (http://output.jsbin.com/pagori):

HTML:

<body>
    <div class="body-wrapper">
        ...
    </div>
</body>

CSS:

html, body, .body-wrapper {
    height: 100%;
}

    .body-wrapper_ios {
        cursor: pointer;
    }

JS:

var userAgent = navigator.userAgent.toLowerCase();

if ((/(ipad|ipod|iphone)/i).test(userAgent)) {
    document.getElementsByClassName('body-wrapper')[0]
            .className += ' body-wrapper_ios';
}

2. Add empty click event handler to body-wrapper element (http://output.jsbin.com/bizizi):

HTML:

<body>
    <div class="body-wrapper">
        ...
    </div>
</body>

CSS:

html, body, .body-wrapper {
    height: 100%;
}

JS:

document.getElementsByClassName('body-wrapper')[0]
        .addEventListener('click', function() {}, false);

Also, you could use any library for mobile browsers. For example, jQuery Mobile (http://api.jquerymobile.com/vmouseover/, http://api.jquerymobile.com/vmouseout/). I can make an example if you need.

Thanks, this is precisely what I needed, however I see what you mean by strange behavior. It looks like it works on desktop however in IOS the picture remains pixelated the whole time, even when changing the transition duration to 10s....I am trying to avoid using complicated Javascript to make the images enlarge in lightboxes when clicked on touch screens, etc. as I don't really know Javascript. — Michael Aaron Wilson, May 03 '15 at 19:17

CSS3 Transition :hover effect reverse animation after a time

2 Answers2