<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>

/* -------------------------------- 

šŸ’” Styling siblings on hover
šŸ”— https://codyhouse.co/nuggets/styling-siblings-on-hover

-------------------------------- */

.radio-btns {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, 100px);
}

.radio-btns:hover .radio-btns__btn:not(:hover) {
  filter: grayscale(100%);
  opacity: 0.75;
}

.radio-btns:hover .radio-btns__btn:not(:hover)::after {
  background-color: rgba(#000, 0.5);
}

@media (min-width: 30rem) {
  .radio-btns {
    grid-template-columns: repeat(3, 150px);
  }
}

.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: block;
  width: 100%;
  max-width: 100%;
}

/* demo stuff */
body {
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

External CSS

  1. https://codepen.io/codyhouse/pen/PoaqJWp.css

External JavaScript

This Pen doesn't use any external JavaScript resources.