<div>
  <div class="radio-btns" role="radiogroup">
    <div class="radio-btns__btn" role="radio" aria-checked="false" tabindex="-1" aria-label="Select image one">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cdn-36_img-1.jpg" alt="Image description">
    </div>

    <div class="radio-btns__btn" role="radio" aria-checked="false" tabindex="-1" aria-label="Select image two">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cdn-36_img-2.jpg" alt="Image description">
    </div>

    <div class="radio-btns__btn" role="radio" aria-checked="false" tabindex="-1" aria-label="Select image three">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cdn-36_img-3.jpg" alt="Image description">
    </div>
  </div>
</div>
/* 💡 Styling siblings on hover - CSS */
/* 🔗 https://s-sd.ru/blog_studio_design/stajling-izobrazhenij-pri-navedenii-kursora/ */

.radio-btns {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, 150px);
}
.radio-btns:hover .radio-btns__btn:not(:hover) {
  filter: grayscale(100%);
}
.radio-btns:hover .radio-btns__btn:not(:hover):after {
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background-color: rgba(0,0,0, 0.5);
}
.radio-btns__btn {
  position: relative;
  cursor: pointer;
  transition: .3s;
}
.radio-btns__btn:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(#000, 0);
    transition: .3s;
  }

  .radio-btns__btn img {
    display: inline-block;
    width: 150px;
    max-width: 150px;
  }


body {
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
  margin:0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.