I'm trying to get the overlay to fade in but it's an immediate change now
HTML:
<div >
<img src="https://basicfishkeeping.com/wp-content/uploads/2023/01/Freshwater-Aquatic-Background-7.png" >
<img src="https://basicfishkeeping.com/wp-content/uploads/2023/01/Freshwater-Aquatic-Background-8.png" >
</div>
CSS:
.image-container {
position: relative;
width: 250px;
height: 250px;
}
.image-container .before {
width: 100%;
height: 100%;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
opacity: 0;
transition: 0.5s;
}
.image-container:hover .after {
display: block;
opacity: 1;
}
Tried running it on Wordpress and got the immediate change to the second image instead of a fade over
CodePudding user response:
The following making the fading-in a transition:
.image-container {
position: relative;
width: 250px;
height: 250px;
}
.image-container .before {
width: 100%;
height: 100%;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
opacity: 0;
transition: 0.5s;
}
.image-container:hover .after {
display: block;
}
.after:hover {
transition: 0.5s;
opacity: 1;
}