Preserve Hover Effect On Touchscreen

I'm working on a site containing a feed of images using Instsfeed.js. Pulling the images, likes, comments and everything works fine. I made a hover effect that overlays the number

Solution 1:

Here you go:

jQuery:

$('.insta-post').on("touchstart", function(e) {
  "use strict"; //satisfy the code inspectorsvar link = $(this); //preselect the linkif (link.hasClass('hasHover')) {
    returntrue;
  } else {
    link.addClass("hasHover");
    $('.insta-post').not(this).removeClass("hasHover");
    e.preventDefault();
    returnfalse; //extra, and to make sure the function has consistent return points
  }
});

CSS:

.insta-post:hover.insta-hover,
.insta-post.hasHover.insta-hover {
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}

Updated JSFiddle

Visit it using a touch device, or using debug tools like Chrome’s web inspector, which can simulate touch.

PS: thanks a lot for sharing such useful link as I really need this kind of plugin.