JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<div class="holder"><div class="symbol"><img src="http://jsfiddle.net/img/logo.png"></div></div>

CSS

body{
    height:100%;
    background-color:green;
}
.holder{
    position:absolute;
    height:200px;
    width:600px;
    background-color:rgba(255,0,0,0.8);
}
.symbol{
    position:absolute;
    right:0;
    background-color:rgba(255,0,0,0.8);  
    height:100%;
    width:100%;
    -webkit-transition:width 0.25s;    
    -moz-transition:width 0.25s;    
    -o-transition:width 0.25s;
    transition:width 0.25s;
}
.holder:hover{
}
.holder:hover .symbol,.symbol:hover{
    background-color:rgba(255,0,0,1);
    width:200px;
}
.symbol img{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    margin: auto;
}