JSFiddle - React, Tailwind, and code Playground

HTML

<a class="ctp-hover" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<span class="hover-caption">VIEW</span>
    <img src="http://lorempixel.com/261/261/"/>
</a>

CSS

.ctp-hover img{
    width:100%;
    height:auto;
}

a.ctp-hover {
    display: block;
    position: relative;
}

.hover-caption {
	text-align:center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: @ctp-red;;
    background:rgba(199,74,78,0.75);
    color: @white;
    display: none;
    padding-top: 48%;
}

JavaScript

$('a.ctp-hover').hover(function(){
$(this).find('.hover-caption').fadeIn(250);
}, function(){
$(this).find('.hover-caption').fadeOut(250);
});