Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to zoom/scale an element on hover with CSS?
The zoom an element on hover, use the :hover selector. The scale() method of the transform property is used to zoom i.e. scale an element. The transition duration is set using the transition property. Let us see how to zoom/ scale an element on hover with HTML and CSS.
Scale a circle
To scale a circle, first, we have set a div −
<div class="zoomDiv"></div>
The transition for the div is set using the transition property −
.zoomDiv {
padding: 50px;
background-color: yellow;
transition: transform 0.2s;
width: 200px;
height: 200px;
margin: 70px;
border-radius: 50%;
border: 4px solid rgb(78, 37, 155);
}
On hover, use the :hover selector to set the transform property with the value scale().The scale(1) means the same shape and scale(1.5) means zoom in −
.zoomDiv:hover {
transform: scale(1.5);
}
Example
To zoom/scale a circle on hover with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.zoomDiv {
padding: 50px;
background-color: yellow;
transition: transform 0.2s;
width: 200px;
height: 200px;
margin: 70px;
border-radius: 50%;
border: 4px solid rgb(78, 37, 155);
}
.zoomDiv:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>Zoom on Hover Example</h1>
<h2>Circle</h2>
<p>Hover over the below element to see it zoom.</p>
<div class="zoomDiv"></div>
</body>
</html>
Scale a rectangle
To scale a rectangle, first, we have set a div −
<div class="zoomDiv"></div>
The transition for the div is set using the transition property −
.zoomDiv {
width: 200px;
height: 100px;
background: blue;
border: 3px solid rgb(42, 0, 70);
transition: transform 0.2s;
}
On hover, use the :hover selector to set the transform property with the value scale().The scale(1) means the same shape and scale(2) means zoom in −
.zoomDiv:hover {
transform: scale(2);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.zoomDiv {
width: 200px;
height: 100px;
background: blue;
border: 3px solid rgb(42, 0, 70);
transition: transform 0.2s;
}
.zoomDiv:hover {
transform: scale(2);
}
</style>
</head>
<body>
<h1>Zoom on Hover Example</h1>
<h2>Rectangle</h2>
<p>Hover over the below element to see it zoom.</p>
<div class="zoomDiv"></div>
</body>
</html>
Scale a square
To scale a square, set a div −
<div class="zoomDiv"></div>
The transition for the div is set using the transition property −
.zoomDiv {
width: 150px;
height: 150px;
background: orange;
border: 3px solid blue;
transition: transform 0.2s;
}
On hover, use the :hover selector to set the transform property with the value scale().The scale(1) means the same shape and scale(1.5) means zoom in −
.zoomDiv:hover {
transform: scale(1.5);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.zoomDiv {
width: 150px;
height: 150px;
background: orange;
border: 3px solid blue;
transition: transform 0.2s;
}
.zoomDiv:hover {
transform: scale(2);
}
</style>
</head>
<body>
<h1>Zoom on Hover Example</h1>
<h2>Square</h2>
<p>Hover over the below element to see it zoom.</p>
<div class="zoomDiv"></div>
</body>
</html>
525 Views
