<div class="gallery">
<div class="gallery-image">
  <img src="https://37.media.tumblr.com/bddaeb8fe12eda6bb40cf6a0a18d9efa/tumblr_n8zm8ndGiY1st5lhmo1_1280.jpg" width="300" height="200" />
  
<div class="gallery-text">

<h3>BOOM!</h3>
  
</div>    
</div>  
</div>
.gallery {
     width:300px;
     height:200px;
     position: relative;
		padding: 0;
		margin: 0;
		text-align: center;
	}

	.gallery-image{
cursor:pointer;
		position: relative;
		display: block;
	}

	.gallery-text{
	    position: absolute;
	    top: 0; right: 0;
	    bottom: 0; left: 0;
	    width: 300px;
	    height: 200px; 
	    text-align: center;
	    background-color: rgba(0,0,0,0.8);
	    opacity: 0;
	    -webkit-transition: opacity 0.6s;
	    -moz-transition: opacity 0.6s;
	    transition: opacity 0.6s;
       vertical-align:middle;
       line-height:200px;
	}

	.gallery-text:hover{
	    opacity: 1;      
	}

	.gallery-text h3{
	    color: white;
	    display: inline-table;
       vertical-align:middle;
       line-height:100%;            
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.