Notes About The HTML
The markup is straightforward. For the case of the tutorial, I demonstrated 6 different effects. Each effect is structured inside a parent container with a class of .effects. This allows us to target all the images inside this div. Each image with overlay link is placed inside a div with a class of .img. The parent container will have a relative positioning, allowing us to give our overlay an absolute position that spans the width and height of the container (i.e. the space occupied by the image).

Instead of using the CSS pseudo class :hover, we’re going to check it with JavaScript/jQuery and Modernizr. This will enable us to induce the same effect on hover OR on click. Modernizr allows us to check if touch is enabled (which in most cases means that we’re on a touch screen device). If it is, a click/touch will induce the effect. If not, a hover will induce the effect. We’ll use jQuery’s mousenter/mouseleave functionality in this case to toggle the effect. The toggling of the effect will be induced by adding/removing the class .hover to our image.

In the case of touch devices, we want to give the user the option of hiding the overlay. We’ll present a little close button inside the overlay that defaults to a hidden display. If touch is sensed by Modernizr though, we’ll show the close button, which will close the overlay. This isn’t necessary for hovering, because when the mouse leaves the area, the overlay will transition out.