JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="wut">
    <img src="http://placekitten.com/g/300/350" alt="KITTENZ" />
    <div class="fav">
        WUT WUT IM A KITTEN
    </div>
</div>

CSS

div.wut {
    width: 300px;
    height: 350px;    
}
div.fav {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 350px;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
}
.fav {
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    cursor: pointer;
    height: 346px;
    width: 347px;
    position: absolute;
    z-index: 10;
    opacity: 0;
    font-family: Tahoma;

}
.fav:hover {
    opacity: 1;
    
    text-shadow:0 2px 2px #000;
    
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    -webkit-box-shadow: 0px 0px 4px #000;
    -moz-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
}