I am looking to create a smooth image transition effect where one image transitions to another when hovered over. Currently, I have code that achieves this, but there is an issue with the initial scaling of the top image. It automatically resizes to a larger size, causing the transition to appear as if the image has moved due to the different dimensions. Even though both images are supposed to be the same size, the top image appears larger initially.
You can see my code and the issue in action in the preview here: https://jsfiddle.net/k3jLxofv/1/
In the "Project Area 1" section, you will notice two images loaded initially, with one appearing smaller than the other despite them being identical (as indicated by the lines). I am unsure why there is a discrepancy in size between the two images. My goal is to hover over "Project Area 1" and achieve a seamless transition without any visible movement.
"Project Area 2" demonstrates the expected image sizes at both states (hovered on and not).
Thank you for your help!
.projects-grid-setup {
display: grid;
grid-template-columns: repeat(2, minmax(320px, 1fr));
grid-gap: 0.9rem;
width: 98.3%;
margin: 0 auto;
margin-bottom: 1rem;
}
.projects-tile {
background: black;
}
.projects-tile-picture {
width: 100%;
height: 100%;
object-fit: cover;
}
.crossfade {
position: relative;
}
.crossfade img.fade {
position: absolute;
left: 0;
opacity: 1;
transition: opacity 0.55s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}<div class="projects-grid-setup">
<!--Project Start-->
<a class="projects-tile" href="google.com" target="_blank">
<div class="crossfade">
<img class="projects-tile-picture top fade" src="https://picsum.photos/300/200?1" />
<img class="projects-tile-picture" src="https://picsum.photos/300/200?1" />
</div>
<p class="projects-tile-title">
Project Area 1
</p>
</a>
</div>