Greyscale image that is not in focus-CodePudding

I am new to html and CSS, bare with me. I got two images, the one that gets hovered on will get bigger and text will show. Now, i want the image that is not in focus to get grayscaled. Also when neither of the images is hovered over, they're not having the grayscale effect on.

Is this possible through CSS?

CodePudding user response：

If you use a combination of :hover on the container and on the images you can.

.container {
  width: fit-content;
}

.container img {
  transition: 0.5s filter ease-in-out, 0.5s transform ease-in-out;
  margin-inline: 1rem;
}

.container:hover img {
  filter: grayscale(1);
}

.container:hover img:hover {
  filter: grayscale(0);
  transform: scale(1.1);
}

<div class="container">
  <img src="https://picsum.photos/seed/1/150/150" alt="">
  <img src="https://picsum.photos/seed/2/150/150" alt="">
  <img src="https://picsum.photos/seed/3/150/150" alt="">
</div>

CodePudding user response：

Yes, it can be achieved using pure CSS. Here's how

The HTML

<div>
  <img class="img1" src="" alt="">
  <img class="img2" src="" alt="">
<div>

The CSS

.img1:hover {
  transform: scale(1.2); /* some other css that you want when hovered on img1 */
}

.img1:hover .img2 { /* This selector selects img2 when img1 is hovered */
  filter: greyscale(100%); /* makes image grey */
}

You can do it other way round to change img1 when hovered on img2.