Transform your image using a stunning zoom-in effect

Currently, I am experimenting with a feature for my website where I want images to switch upon hover. While I have successfully achieved the image switch on hover, I am looking to create smooth transitions between the switches, with the second image being zoomed in.

I came across a website that has exactly the effect I am trying to replicate on mine. Unfortunately, my attempts have been unsuccessful so far due to my beginner-level knowledge of stylings involving Transitions & Transforms. Can anyone provide guidance on how to achieve this? Thank you in advance!

Reference website: Check out the "Sherbat-e-Mohabbat" section on this website, where the desired effect occurs when hovering over an image [Screenshot: https://prnt.sc/1tl7aje]

Here is a snippet of 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>
htmlcsscss-transitionsstylingcss-transforms

Answer №1

To achieve this effect, simply overlay the second image on top of the first.
Customize the following CSS to fit your requirements:

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


.img-overlay > div {
  position: absolute;
  overflow: hidden;
}
.additional-image img {
  transition: all .5s ease;
  opacity: 0;
}
.img-overlay:hover .additional-image img {
  transform: scale(1.10);
  opacity: 1;
}
<div class="img-overlay">
  <div class="main-img">
    <img class="img" src="https://example.com/image1.jpg">
  </div>
  <div class="additional-image">
    <img class="img" src="https://example.com/image2.jpg">
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Designing numerous vertical lists in HTML

I need help with displaying multiple lists vertically using HTML For example: +--------+---------------------------------------------+--+ | Global | Region Country Currency Account Type Entity | | +--------+---------------------------------------------+ ...

htmlcss

Utilizing the Command Line/Window feature within Visual Studio Code

As a newcomer to Visual Studio Code, I'm currently using the latest Version: 1.29.1. When I used Matlab, I had access to a script window for writing code, a Command Window for testing code snippets and viewing variable values, as well as a workspace ...

javascripthtmlcssvisual-studiovisual-studio-code

Styling for main banner image on large desktop screens and mobile devices

I need help with website design and CSS solutions. Currently, I have a WordPress website with a onepager theme. At the top of the page, there is an image that almost fills the screen along with a title. My concern is how this image behaves with different b ...

htmlcssresponsive-design

Adjust the background image color with CSS styling

I have a collection of icons that I would like to incorporate into my application. These icons primarily consist of glyphicons with a few others mixed in. I want the HTML structure to mimic that of a glyphicon, specifically: <a href="#"> <spa ...

htmlcss

Ways to toggle the visibility of an element based on the condition of two other elements

I'm facing a challenging UI use-case that I just can't crack. I have 2 non-nested divs that are causing me trouble (not nesting is crucial here as it would have made things much simpler). Here is the structure of the divs: <div class="a"> ...

jqueryhtmlmouseeventjquery-hover

React NextJS CSS - Setting the section's height to 100% of the parent's height results in taking up 100% of the page's height

I've encountered an issue while transferring my project to NextJS from Create-React-App. In NextJS, setting the height of a section to 100% is causing it to take up the entire page height instead of adjusting for the header and footer elements. I nee ...

cssreactjsnext.js

What are some ways I can showcase the outcomes of my multiple choice quiz?

I need help with my multiple choice quiz. I want to display the answers under each question and highlight the correct one in bold. Here is the current code: function check() { var question1 = document.quiz.question1.value; var question2 = document.q ...

javascripthtml

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...

javascripthtmljspjquerystruts

Parallax scrolling and Swiper slider, a match made in digital design

Currently facing an issue with Swiper Slider and Simple Parallax Scrolling. Whenever I switch slides, the same image is displayed repeatedly. I suspect the problem lies in the fixed position of the image within the parallax effect. Attempted to resolve b ...

jquerycssparallaxswiper.js

Struggling to figure out Visual Studio Code - Having trouble loading images and fonts into my CSS file

It seems like I'm missing something here (just so you know, I'm totally new at this). I attempted to use fonts that are loaded on my computer for my CSS stylesheet (font file in my VSC), but no luck. I also tried using images from my files as bac ...

cssimagefonts

Creating a contact form in WordPress that triggers a separate PHP file

I've been working on integrating a small contact form into the sidebar of my WordPress site. After moving the code from its original HTML file to the appropriate WordPress PHP files, everything seems to be functioning correctly except for the contact ...

phphtmlwordpressforms

Embed a Style-sheet into an Iframe (Facebook Like Box)

I'm facing the challenge of customizing a Facebook like box with predefined image sizes and borders that don't align with our design. I want to override some styles to make it more suitable for our website. The Likebox is currently embedded via ...

javascriptjquerycssfacebook-like

User's information will only be updated once the page is refreshed

I am encountering an issue with displaying two ul elements based on user login status. When I log in, the first ul is shown immediately, but the second ul is only displayed after a page refresh. Initially, the value in "accountService.currentUser" is null ...

htmlangulartypescript

Resolving Issues with Page Feature Images on Your WordPress Site

Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...

phphtmlcsswordpressdynamic

When the audio on the device is in use, the video will not play and vice versa

Whenever my video starts playing, the audio from my device (such as iPod or Spotify) stops. If I try to play the audio manually while the video is playing, the video freezes. Interestingly, when I tested playing an audio file directly within the app, it wo ...

javascripthtmlangularjsionic-framework

Concealing website links in the browser's address bar

Running my own website on a personal server with Ubuntu server, I noticed that my public IP address is displayed in the status bar when visitors browse my site or hover over links. Even after purchasing a domain name from godaddy, I couldn't find an o ...

phpjavascripthtmlubuntu-serverurl-masking

The div seems to be resistant to centering no matter the effort. Applying padding doesn't seem to be the solution, and even setting

I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be i ...

htmlcsshtml-listscenterpadding

Adjusting the height of a Vue component to 100% triggers a change in height whenever a re-render occurs

In my Vue component, there is a class called "tab-body-wrapper" that serves the purpose of displaying the "slot" for the active tab. However, I encountered an issue while troubleshooting where the height of the ".tab-body-wrapper" component reduces during ...

javascripthtmlcssvue.jsvue-component

Tips for positioning a picklist field dropdown on top of a lightning card in Lightning Web Components

Attempting to resolve an issue with CSS, I have tried adding the following code: .table-responsive, .dataTables_scrollBody { overflow: visible !important; } However, the solution did not work as expected. Interestingly, when applying a dropdown pickli ...

javascripthtmlcsssalesforce-lightninglwc

Design a customizable input field to collect HTML/JS tags

I'm looking to incorporate a similar design element on my website. Can anyone offer me some guidance? Check out the image here ...

javascripthtmlcss