JSFiddle - React, Tailwind, and code Playground

by ALEKSEY SHULMAN

HTML

<div id="main">
  <div class="opened" id="flex1">
     <div class="image"></div></div>
  <div class="closed" id="flex2"></div>
  <div class="closed" id="flex3"></div>
  <div class="closed" id="flex4"></div>
  <div class="closed" id="flex5"></div>
</div>

CSS

#main {width:980px; height:368px; margin: auto;
    border:0px solid #c3c3c3;
    display:-webkit-flex;
    display:flex;}

#flex1 {background-color:coral;}
#flex2 {background-color:khaki;}
#flex3 {background-color:pink;}
#flex4 {background-color:lightgrey;}
#flex5 {background-color:lightblue;}

#main div:nth-of-type(1) {flex-grow: 6.4;}

#main div{-webkit-flex-grow:1; flex-grow:1;
    -webkit-transition:flex 1s;
    transition:flex 1s;
    background-repeat:no-repeat;}
.image {possition:absolute; width:inherit; height:368px; background-image: url("https://s3-us-west-2.amazonaws.com/dakomoda.com/shop-img/GLT-LSOVR01-14PU/1D.jpg");}

/* hover's */
#main div:hover {flex-grow: 6.4;}

JavaScript

document.getElementById('flex2').onmouseover = function(){
    document.getElementById('flex1').style.flexGrow = '1';
}

document.getElementById('flex2').onmouseout = function(){
    document.getElementById('flex1').style.flexGrow = '';
}

document.getElementById('flex3').onmouseover = function(){
    document.getElementById('flex1').style.flexGrow = '1';
}

document.getElementById('flex3').onmouseout = function(){
    document.getElementById('flex1').style.flexGrow = '';
}

document.getElementById('flex4').onmouseover = function(){
    document.getElementById('flex1').style.flexGrow = '1';
}

document.getElementById('flex4').onmouseout = function(){
    document.getElementById('flex1').style.flexGrow = '';
}

document.getElementById('flex5').onmouseover = function(){
    document.getElementById('flex1').style.flexGrow = '1';
}

document.getElementById('flex5').onmouseout = function(){
    document.getElementById('flex1').style.flexGrow = '';
}