All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Zoom Image In HTML onmouseover

Last Updated : Mar 11, 2024

How To Zoom Image In HTML onmouseover

In this tutorial we will show you the solution of how to zoom image in HTML onmouseover, all of us know that onmouseover is also known as mouse hover.

Now, the meaning of our today’s topic is that when there is an image in html and you have to place your mouse cursor on image at any side, then the image must get bigger or look zoomed.

So, today we are here to show you that how you are able to zoom an image in html onmouseover.

Step By Step Guide On How To Zoom Image In HTML onmouseover :-

Now, here we will show you how to zoom an image in html. So, in the below code first we make an image in a box or you also say it division, because both acts like a rectangle.

After this we apply a transition on the div as well as image. So, that when our mouse cursor placed on the image it’s zoomed.

The code is given below and after this we also specify which element plays what role in webpage.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
<style>
        .zoom
        {
            height: 200px;
            width: 200px;
            margin: 200px;
            transition: transform .5s;
       }
        .zoom:hover
        {
            transform: scale(3);
        }
    </style>
</head>
<body>
    <div class="zoom">
        <img src="img.jpg" alt="" width="200" height="200">
    </div>
</body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Before closing our head tag, we create style tag and the elements of style tags are described in below point.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  5. In the body tag, we create a div and placed image in this after this we give image width and height for its dimensions and source of image is also given here.
  6. Now there is a class given to division and in head tag there is a CSS specified in which we specify first width and height and margin to show image in center of page after this we use transition attribute and give it a name which is used in hover again.
  7. After this a time is given to transition, you can understand its use by changing this. And in next a hover is used in which we use zoom property.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, we can say that we are able to zoom any image in html onmouseover. The method is same of all tags and you can understand all the attributes by changing its values. I hope this tutorial on how to zoom image in HTML onmouseover helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪