CSS Nugget: Styling siblings on hover

css-nugget-styling-siblings-on-hover.markdown

CSS Nugget: Styling siblings on hover

More info: https://codyhouse.co/nuggets/styling-siblings-on-hover

A Pen by CodyHouse on CodePen.

License.

dEMO https://codemyui.com/css-only-styling-child-elements-on-hover/

index.html

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

style.scss

// 💡 CSS Nugget: Styling siblings on hover
// ℹ️ Use the :not CSS selector to stylize siblings on hover
// 🔗 https://codyhouse.co/nuggets/styling-siblings-on-hover

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

  &:hover .radio-btns__btn:not(:hover) {
    filter: grayscale(100%);

    &::after {
      background-color: rgba(#000, 0.5);
    }
  }
  
  @media (min-width: 30rem) {
    grid-template-columns: repeat(3, 150px);
  }
}

.radio-btns__btn {
  position: relative;
  cursor: pointer;
  transition: .3s;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(#000, 0);
    transition: .3s;
  }

  img {
    display: block;
    width: 100%;
    max-width: 100%;
  }
}

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