CodePen Embed - CSS :has() hover example

<section>
    <a>
      <h2>Item 1</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, harum.</p>
    </a>
    <a>
            <h2>Item 2</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, harum.</p>
    </a>
    <a>
            <h2>Item 3</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, harum.</p>
    </a>
    <a>
            <h2>Item 4</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, harum.</p>
    </a>
    <a>
            <h2>Item 5</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, harum.</p>
    </a>
    <a>      <h2>Item 6</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, harum.</p></a>
</section>

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap');

*{
  font-family: 'Work Sans', sans-serif;
}

section{
  width:75%;
  margin:0 auto;
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  box-sizing: border-box;
  padding:3rem 0;  
}

a{
  width:100%;
  aspect-ratio:1;
  border-radius:.25rem;
  background:#dddddd;
  box-sizing: border-box;
  padding:1rem;
  transition:all .3s ease-out;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
}

h2{
  margin-bottom:0;
}

p{
  font-size:14px;
}

a:hover{
  transform: scale(1.05);
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,.1)
  
}

section:has(a:hover) a:not(:hover){
  opacity:.33;
}

This Pen is owned by Salad Creative on CodePen.

See more by @saladcreative on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.