How To Make An Image Zoom In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you the solution of how to make an image zoom in HTML, all of us know that the more the effects or say animation, the more creative website is.
There are many ways to make a website creative, you can add JavaScript and jQuery codes also to make a website more effective.
And from them the one way is to make an image zoom in html. Mostly you see on webpages that there are some image and when you hover on them means when you move your cursor to image.
The image gets zoomed. So, this concept seems to be more interesting. Let’s see how we are able to do this.
Step By Step Guide On How To Make An Image Zoom In HTML :-
Now, here are many ways to make an image zoom in html. Like image gets zoomed on your mouse click, image gets zoomed with the help of some of some slider and image gets zoomed when you hover on it.
Hence, there are many ways with the help of an image gets zoomed. Now, go through the example which is below and see what you understand from example.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
.container{
width: 600px;
height: 600px;
overflow: hidden;
}
.image{
width: 300px;
height: 300px;
background-position: center;
background-size: cover;
transition: 1s;
margin: 100px;
}
.image:hover{
transform: scale(2);
}
</style>
</head>
<body>
<div class="container">
<img src="demo10/logo.jpg" alt="" class="image">
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- 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.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- In the body tag, here we create a container in which we place our image and other thing is that you can also set image as background image. Next further in div or container we create an image tag in which we assign image.
- The main thing is in CSS. Here, first we give dimensions to container and then to image like width, height, background position, size, margin from sides and transition in which we give time as value.
- And further we create a property of hover in which we say that when you place your cursor on your image then image gets zoomed with the help of transition attribute and value placed in it.
- 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. 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 make an image zoom in HTML helps you.
About Pragati
