How to Zoom In-Out in HTML using CSS | Web Development Tutorials

How to Zoom In-Out in HTML using CSS | Web Development Tutorials


While surfing on internet we face multiple interactive elements, so, today let's see how to add zoom-in and zoom-out effect on any of the element in HTML using CSS withing 2 lines of CSS code.

  • Import any image into your HTML web page using if you're working with a image or else add any element that's totaly on your choice. 
  • Assign a particular 'ID' or 'Class' to the imported or added element for better reach. 
  • In this example I'll add zoom property on a image. Below is the code to import a image in your HTML page.
<body>
    <img src="human.png" alt="">
    <h1>gradle builders</h1>
</body>
  • Every work is done under the body tag of the HTML page.
As there was just the image so this doesn't have any ID or Class
  • After adding the image successfully to your page, now let's work with our Cascading Style Sheet or better known as CSS. 
  • Create a new CSS file and link it with the your HTML page. 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
  • Above is the code to link your CSS with HTML.
  • Moving on to the CSS page to style our HTML page, there we'll use HTML img tag to address our image.
  • Then follow below command to adding a Zooming effect while hovering the image.
img:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: all 0.5s ease-in;
}

This is how we add Zoom-in property to a image.

Post a Comment

1 Comments