Image Overlay

Creating image overlay on hover effect

HTML

<div class="image">
            <img src="http://placehold.it/600x400/2ecc71/fff" alt="" class="img-responsive">
            <div class="overlay">
              <p>Apenas um teste</p>
            </div>
          </div>

CSS

.transition { 
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.image {
    position:relative;
    display:inline-block;
}
.overlay {
    display:none;    
}
.image:hover .overlay {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.9);
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    text-align:center;
    @extend .transition
}
.image:hover .overlay p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color:white;
  font-size:20px; 
}
img {
    vertical-align:top;
}

JavaScript

$(document).ready(function() {     
    $('.image').onclick(function(){     
        $('.overlay').addClass('transition');
    },     
    function(){    
        $('.overlay').removeClass('transition');     
    });
});