The scale function in CSS is used to resize an
element. You can use it in combination with the :hover pseudo-class to scale an
element up when the mouse hovers over it, and return it to its original size
when the mouse moves away.
scale-up.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Scale Example</title> <style> .scale-box { width: 100px; height: 100px; background-color: #3498db; transition: transform 0.3s ease; } .scale-box:hover { transform: scale(1.2); /* Scales up by 20% */ } </style> </head> <body> <div class="scale-box"></div> </body> </html>
you can also scale down using the scale function in CSS. The scale function can take any value greater than 0, so you can use a value less than 1 to shrink an element.
For example, to scale down an element to 80% of its original size on hover, you would use scale(0.8).
.scale-box:hover {
transform: scale(0.8); /* Scales down to 80% of the original size */
}
No comments:
Post a Comment