How do I zoom in on the image?

Please Share On:

Definition:

Here, you are going to learn how to how can you zoom in on the image on hover the mouse cursor over the image.

Let’s begin our design.

First, create a simple <html> code without any CSS code.

For this, you need a link to your image. See an example below:

HTML Source Code:

<h2 class="title">Image Zoom In</h2>
    <div class="container">
       <center><img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="zoom-in image" class="image"> </center>
         <p>
        <center>Zoom-in on mouse hover.</center>
      </p>
    </div>

CSS Source Code:

<style>
      .image:hover{
         transform: scale(1.5);
        -ms-transform: scale(1.5); /* For Internet Explorer 9 */
        -moz-transform:scale((1.5); /* Firefox */
        -webkit-transform:scale((1.5); /* Safari and Chrome */
         -o-transform:scale((1.5); /* Opera */
      }
    </style>

Full Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image:hover{
         transform: scale(1.5);
        -ms-transform: scale(1.5); /* For Internet Explorer 9 */
        -moz-transform:scale((1.5); /* Firefox */
        -webkit-transform:scale((1.5); /* Safari and Chrome */
         -o-transform:scale((1.5); /* Opera */
      }
    </style>
  </head> 

  <body> 
    <h2 class="title">Image Zoom In</h2>
    <div class="container">
       <center><img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="zoom-in image" class="image"> </center>
         <p>
        <center>Zoom-in on mouse hover.</center>
      </p>
    </div>
   
  </body>
</html>

Output:

Image Zoom In

Zoom-in on mouse hover.

try it yourself

Donate to support writers.

You may be interested in the following topics:

How do I zoom in on the image?

Post Views: 463