JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<div class="box">

    <a href="#">
        <img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
        <div class="hidden"></div>

</div>

CSS

.box{
    position: relative;       
}

.box:hover .hidden{
    opacity: 1;
    width:500px;
}

.box .hidden{    
   background: yellow;
    height: 334px;    
    position: absolute; 
    top: 0;
    left: 0;    
    width: 0;
    opacity: 0;    
    transition: all 1s ease;
}