JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <img src="" alt="">
</div>

SCSS

.container  {
  display: grid;
  gap : 10px;
  aspect-ratio: 1;
  grid-template-columns:  repeat(3,auto);
  
  width: calc(150px*1.5);
  heght: calc(150px*1.5);
  &:has(img:hover) {
    filter grayscale(100%) blur(5px);
  }
  &img:not(:hover) {
    filter grayscale(100%) blur(5px);
  }
  &hover {
    filter contrast(200%);
  }
}


body:has(.box:hover) {
  background url();
}