JSFiddle - React, Tailwind, and code Playground

by secondfre

HTML

<div id="container">
    
    <div id="box1"><img src="http://lorempixum.com/400/200/abstract/1"></div>

    <div id="box2"><img src="http://lorempixum.com/400/200/abstract/2"></div>

    <div id="box3"><img src="http://lorempixum.com/400/200/abstract/3"></div>
    
</div>

CSS

#container {
}

#box1 {
    float: left;
    width: 150px;
    overflow: hidden;
    margin: 0 10px 0 0;
    -webkit-transition:width 1s ease-in;  
}

#box1:hover {
    width: 400px;
}

#box2:hover {
    width: 400px;
}

#box3:hover {
    width: 400px;
}

#box2 {
    float: left;
    width: 150px;
    overflow: hidden;
    margin: 0 10px 0 0;
    -webkit-transition:width 1s ease-in;  
}

#box3 {
    float: left;
    width: 150px;
    overflow: hidden;
    -webkit-transition:width 1s ease-in;  
}