CSS Zoom Background Image On Hover
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Pragati
In this article we will show you the solution of css zoom background image on hover, the Cascading style sheet or CSS is used to add style to the HTML. In this tutorial, we will see how a background image zooms while hovering over them using the mouse.
The background image zooms on hover can be done with a pseudo-class :hover. We’re going to use the CSS transform property in this tutorial.
Step By Step Guide On CSS Zoom Background Image On Hover :-
Let us see an example of a CSS zoom background image on hover.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> CSS zoom background image on hover </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
.div{
height: 600px;
width: 600px;
overflow: hidden;
}
.image {
height : 100%;
width : 100%;
background-size: cover;
background-position: center;
}
.image:hover {
transform: scale(2.0);
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> CSS zoom background image on hover </p>
<div class="div">
<div class="image">
<img src = " https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg " alt = " " >
</div>
</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 the <head> tag is used to contain information about the 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.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <div> with a class “ div ” .
- Within that <div>, Create a <div> with the class “ image ” tag that contains an image URL.
- Now create the <style> tag between the <head> tag
- Addressing the class “ div ”, add the “ height ” and the “ weight ” property. We’re also setting the “ overflow “ property hidden to hide the overflow.
- Now addressing the class “ image “ , set the “ height ” and the “ weight ” property to 100%. Also setting the “ background-size “ to cover and the “ background-position “ to center.
- Again Address the class “ image “ with the pseudo-class :hover , adding the “ transform ” property by the scale( ). By changing the scale you can zoom as much as you can.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to give CSS zoom background image on hover.
I hope this article on css zoom background image on hover helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
