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%;
}
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;
}