JSFiddle - React, Tailwind, and code Playground

by Josh Patterson

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<div class="col-xs-6 col-sm-3 ">
    <div class="my-thumbnail">
                
        <div class="thumbnail-mask">
            <a href="#" class="btn btn-default">Enter</a>
        </div>
        <img src="http://placehold.it/215x150" /> 
          
          
    </div>
</div>

CSS

.my-thumbnail{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;	
	overflow: hidden;
    height: 300px;
}

.thumbnail-mask{
	z-index: 1;
	text-align: center;
	background: rgba(0,0,0,0.4);	
	opacity: 0;
    margin: 0 auto;

  -webkit-transition: opacity 0.3s ease-out;
     -moz-transition: opacity 0.3s ease-out;
       -o-transition: opacity 0.3s ease-out;
      -ms-transition: opacity 0.3s ease-out;
          transition: opacity 0.3s ease-out;
}
	.thumbnail-mask .btn{
		/*margin: auto;*/
		/*text-align: center;*/
        /* The following will not work because it only works on text/inline elements:
           
           vertical-align: middle;*/
		
		
	}

.my-thumbnail:hover .thumbnail-mask{
	opacity: 1;
}
.my-thumbnail:hover .thumbnail-mask .btn{
	visibility: visible;
}

.my-thumbnail img {	
	height: 100%;
	width: 100%;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.my-thumbnail:hover img{
	height: 150%;
	width: 150%;
}

JavaScript

setThumbHeight();


$(window).resize(setThumbHeight);
$(window).resize(centerBtn);

function centerBtn(){
    $('.my-thumbnail .btn').each(function(){
        var verticalCenter = $('.my-thumbnail').height()/2;
        var mrg = verticalCenter - $(this).height();
        
        $(this).css('margin-top',mrg+'px');
	});
}

function setThumbHeight(){
    $('.my-thumbnail').each(function(){
        $(this).height($(this).width() * 0.69732);			
	});
}