Detect content in middle of screen

Question

I have a masonry grid style wordpress website, which is working quite well.

The grid is made up of square images, which on rollover fade up a overlay with information about the content. This happens via CSS

However on mobile devices its not so easy to rollover an image, there is a hover option which is working. But I would like to make it a little easier for the user.

Is there a way to detect when the a div is in the middle of the screen and fade the overlay up for a brief moment before fading it back out again?

I am currently looking into viewports. Is that he right way to be heading?

My css for the hover at the moment I believe is:

#wall_background .grid-item .overlay-custom
{
    cursor:pointer;
    position:absolute;
    left:0;top:0;
    width:100%;
    height:100%;
    opacity:0;
    filter:alpha(opacity=0);

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;

    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -ms-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}

Thanks