reactjshovermousehover

how to set image opacity on hover?

I have two images and I want to adjust the opacity of the images on hover

File CSS

.project-container .img {
  flex: 4;
  position: relative;
  padding: 30px 0;
}

.project-container .img .img-2 {
  opacity: 0.5;
  z-index: 1;
}

.project-container .img .img-2:hover {
  opacity: 1;
  z-index: 2;
}

.project-container .img .img-1 {
  opacity: 1;
  z-index: 2;
}

.project-container .img img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 5%;
}

before I do the hover before I do the hover

which I want in case of hover after I do the hover

Solution

  • You can simply check the hover state of .project-container and set the hover state of child images based on that.

    .project-container:hover .img-1 {
  opacity: 1;
  z-index: 2;
}
.project-container:hover .img-2 {
  opacity: 0.5;
  z-index: 1;
}