Switch Image with Zoom In effect

Question

Ok, so basically I am trying out a feature for my website in which I want to have Image switch on hover I achieved to switch Image on hover but it instantly switches what I want is smooth transitions between the switch with second image being zoomed in

I found a website which has the exact effect I tried to replicate same in mine but failed miserably and nothing happens as I am newbie to stylings with [Transitions & Transforms] can somebody guide me and help me achieve it? Thanks in advance !

Reference website : in this website look out for "Sherbat-e-Mohabbat" section in which this effect happens when you hover over an image [Screenshot: https://prnt.sc/1tl7aje]

My Code structure:

<div class="image-wrapper">
  <div class="primary-image">
    <img class="img" src="src_url">
  </div>
  <div class="secondary-image">
    <img class="img" src="secong_src_url">
  </div>
</div>

Answer 1

You can do this by overlaying the second image on top of the first.
Adjust the following css to your needs:

.image-wrapper > div {
  position: absolute;
  overflow: hidden;
}
.secondary-image img {
  transition: all .5s ease;
  opacity: 0;
}
.image-wrapper:hover .secondary-image img {
  transform: scale(1.10);
  opacity: 1;
}

 .image-wrapper > div { position: absolute; overflow: hidden; }.secondary-image img { transition: all.5s ease; opacity: 0; }.image-wrapper:hover.secondary-image img { transform: scale(1.10); opacity: 1; }

 <div class="image-wrapper"> <div class="primary-image"> <img class="img" src="https://placeholder.pics/svg/300/FF6DD3"> </div> <div class="secondary-image"> <img class="img" src="https://placeholder.pics/svg/300/00FFD5"> </div> </div>