Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Zoom Scale an Element on Hover with CSS
To zoom/scale an element on hover with CSS, we will be using two different approaches. In this article, we will be understanding these two approaches to explain how to zoom/scale an element on hover with CSS.
We are having two examples in each approach where we have a div element and an image, our task is to zoom div and image element on hover with CSS.
Approaches to Zoom/Scale an Element on Hover
Here is a list of approaches to zoom/scale an element on hover with CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Zoom Using scale() Method
In this approach to zoom/scale an element on hover with CSS, we have used scale() method of transform property.
- We have created a square using div element with CSS properties like height and width for setting the dimension, margin-left and margin-top for setting the margin and background-color to set the color of square.
- We have used transition property to specify the transition.
- We have used ".scale:hover" which set the effect on hovering over div with class name scale.
- We have used "transform: scale(1.5);" to zoom div element on hover.
- In example 2, we have applied scale() method on an image to zoom image on hover.
Example 1
Here is a complete example code implementing above mentioned steps to zoom/scale an element on hover with CSS scale() method.
<html lang="en">
<head>
<title>
Zoom Using Scale() Method
</title>
<style>
.scale {
margin-left: 100px;
margin-top: 50px;
height: 150px;
width: 150px;
background-color: #04af2f;
transition: transform 0.2s;
}
.scale:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<h2>
Zoom/Scale an Element on Hover with CSS
</h2>
<p>
In this example we have used <strong>scale()
</strong> method to zoom/scale a div element
on Hover with CSS.
</p>
<div class="scale"></div>
</body>
</html>
Example 2
In this example, we have used img tag to insert an image then applied scale() method to zoom/scale image on hover.
<html lang="en">
<head>
<title>
Zoom Using Scale() Method
</title>
<style>
.scale {
margin-left: 100px;
margin-top: 50px;
transition: transform 0.2s;
}
.scale:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h2>
Zoom/Scale an Element on Hover with CSS
</h2>
<p>
In this example we have used <strong>scale()
</strong> method to zoom/scale an image on
hover with CSS.
</p>
<div class="scale">
<img src="/html/images/test.png">
</div>
</body>
</html>
Zoom Using zoom Property
In this approach to zoom/scale an element on hover with CSS, we have used zoom property which is useful in controlling the magnification level of elements.
- First we have created a square using div.
- We have used :hover psuedo class to apply effect upon hovering on class zoom.
- We have used "zoom: 1.2;" to zoom the div element with class zoom.
- In example 2, we have used an image instead of a square to apply zoom effect on using :hover psuedo class on class zoom.
Example 1
Here is a complete example code implementing above mentioned steps to zoom/scale an element on hover with CSS zoom property.
<html lang="en">
<head>
<title>
Zoom Using zoom Property
</title>
<style>
.zoom {
margin-left: 100px;
margin-top: 50px;
height: 150px;
width: 150px;
background-color: #04af2f;
transition: zoom 0.2s ease;
}
.zoom:hover{
zoom: 1.2;
}
</style>
</head>
<body>
<h2>
Zoom/Scale an Element on Hover with CSS
</h2>
<p>
In this example we have used <strong>zoom
</strong> property to zoom/scale a div
element on hover with CSS.
</p>
<div class="zoom"></div>
</body>
</html>
Example 2
Here is a complete example code implementing above mentioned steps to zoom/scale an image on hover with CSS zoom property.
<html lang="en">
<head>
<title>
Zoom Using zoom Property
</title>
<style>
.zoom {
margin-left: 100px;
margin-top: 50px;
transition: zoom 0.2s ease;
}
.zoom:hover {
zoom: 1.2;
}
</style>
</head>
<body>
<h2>
Zoom/Scale an Element on Hover with CSS
</h2>
<p>
In this example we have used <strong>zoom
</strong> property to zoom/scale an image
on hover with CSS.
</p>
<div class="zoom">
<img src="/html/images/test.png">
</div>
</body>
</html>
Conclusion
In this article, we have understood how to zoom/scale an element on hover with CSS. We have discussed two different approaches which are: by using CSS scale() method and by using CSS zoom property. However, zoom is a non-standard CSS property and it is advisable to use the scale() method for the same output.
3K+ Views
