CODEWITHSUNDEEP
htmlcsscss-transitionsstylingcss-transforms
Viral Thaker
Viral Thaker

Reputation: 942

Switch Image with Zoom In effect

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>

Upvotes: 2

Views: 614

Answers (1)

mutil
mutil

Reputation: 3305

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>

Upvotes: 1

Related Questions