JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line-image-container">
            <div class="line-image-cover">
            <div>
                <span>Hej med dig</span>
            </div>
            </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;
}
div span {
         background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
         position: absolute;
         bottom: 0px;
         opacity:0;
         padding: 10px 0;
         margin: 2px;
         color:#FFF;            
        
         padding-left: 10px;
         padding-right: 10px;
         transition: all 0.3s ease-out;
         -webkit-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
         -ms-transition: all 0.3s ease-out;

         transform: scalex(0) rotatex(90deg);
      }
      div:hover span {
         opacity:1;
         transform: scalex(1) rotatex(0deg);
      }