<div class="acc-img">
  <div class="acc-img__col" tabindex="0" style="--bg: #3a2a55">
    <span class="acc-img__lbl">Aurora</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #553a2a">
    <span class="acc-img__lbl">Copper</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #2a553a">
    <span class="acc-img__lbl">Sage</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #2a3a55">
    <span class="acc-img__lbl">Slate</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #552a3a">
    <span class="acc-img__lbl">Berry</span>
  </div>
</div>

.acc-img {
  display: flex; gap: 3px; height: 220px;
  border-radius: 12px; overflow: hidden;
}
.acc-img__col {
  flex: 1; cursor: pointer; outline: none;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--bg), white 25%), var(--bg));
  display: flex; align-items: flex-end; padding: 14px;
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .3s;
  filter: saturate(0.7) brightness(0.85);
}
.acc-img__col:hover, .acc-img__col:focus {
  flex: 4; filter: saturate(1.2) brightness(1);
}
.acc-img__lbl {
  font: 700 12px/1 system-ui; letter-spacing: 0.14em;
  text-transform: uppercase; color: #f0eeff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}