Expanding Panel Gallery

<div class="eg" id="eg"><div class="eg-i act" style="--c:#ff477e"><span>A</span></div><div class="eg-i" style="--c:#5b6cff"><span>B</span></div><div class="eg-i" style="--c:#16a34a"><span>C</span></div><div class="eg-i" style="--c:#8b5cf6"><span>D</span></div></div>

body{background:#0d1426}
.eg{display:flex;gap:10px;height:200px}
.eg-i{flex:1;border-radius:16px;background:var(--c);cursor:pointer;transition:flex .5s cubic-bezier(.5,0,.2,1);display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.eg-i span{color:#fff;font:800 28px/1 system-ui,sans-serif;opacity:0;transition:opacity .3s .2s}
.eg-i.act{flex:4}
.eg-i.act span{opacity:1}

document.querySelectorAll('.eg-i').forEach(function(i){i.addEventListener('mouseenter',function(){document.querySelectorAll('.eg-i').forEach(function(x){x.classList.remove('act')});i.classList.add('act')})});