cats grid :has atrribute

cats-grid-has-atrribute.markdown

cats grid :has atrribute

A Pen by manan jain on CodePen.

License.

index.html

<h1>Hover</h1>
<div class="gallery">
<img src="https://ychef.files.bbci.co.uk/976x549/p07ryyyj.jpg"/>
<img src="https://i.pinimg.com/736x/c8/64/22/c86422937a50abff89883392097b1814.jpg"/>
<img src="https://play-lh.googleusercontent.com/AmKSpZt_rynhOO0ID1eS0gqeW3DFzoH6KNZkAAgepQ0t9MDRQTmil-nlY5GqkZ_7El0"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBvaUcYnOtisa421rj6ovgiCkkJEjEbuvawQ&usqp=CAU"/>
<img src="https://images.ctfassets.net/ub3bwfd53mwy/5WFv6lEUb1e6kWeP06CLXr/acd328417f24786af98b1750d90813de/4_Image.jpg?w=750"/>
<img src="https://www.rd.com/wp-content/uploads/2021/04/GettyImages-145679137-scaled-e1619025176434.jpg"/>
<img src="https://a.pinatafarm.com/480x532/d41ec32aaa/cute-cat.jpg"/>
  <img src="https://ychef.files.bbci.co.uk/976x549/p07ryyyj.jpg"/>
<img src="https://i.pinimg.com/736x/c8/64/22/c86422937a50abff89883392097b1814.jpg"/>

</div>

style.css

body {
  background: hsl(200 50% 2%);
  display: grid;
  place-items: center;
}
h1 {
  color : whitesmoke;
  letter-spacing: .5rem;
  font-family: monospace;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 35rem;
}
.gallery > img {
  width : 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: all .7s ease;
}

.gallery:has(img:hover)  img:not(:hover){
  opacity : .5;
  scale: .7;
}
.gallery > img:hover{
    animation: rotate .2s alternate ease-in-out;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}