JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line-image-container">
            <div class="line-image-cover"></div>
            <img src="http://3.bp.blogspot.com/-kpKQO74-O-s/T7EjCe8C_7I/AAAAAAAAAjk/oXeNKr9F4F4/s1600/kitty+cat+pictures+2.jpg" class="line-image">
        </div>

CSS

.line-image-container
{
    max-width: 176px;
    max-height: 195px;
    overflow: hidden;
    border: 1px solid #b8d30b;
    position: relative;
    display:inline-block;
    margin: 1px;
}

.line-image-container:hover {
    border: 2px solid #b9d90b;
    cursor: pointer;
    margin: 0px;
}

.line-image-container:hover .line-image-cover
{
    
    visibility: visible;
    opacity: 1;
    -webkit-transition:opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition:opacity 1s linear;
    transition:opacity 1s linear;
}

.line-image-cover
{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background: gray;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    -webkit-transition:opacity 1s linear, visibility 1s linear;
    -moz-transition: opacity 1s linear, visibility 1s linear;
    -o-transition:opacity 1s linear, visibility 1s linear;
    transition:opacity 1s linear, visibility 1s linear;
}