Enlarge image on hover using CSS

Enlarge image on hover using CSS

For more questions and answers visit our website at Frontend Interview Questions

Basic Concept of Image Enlargement on Hover

The fundamental idea behind enlarging an image on hover is to change its size when the user hovers over it. This can be accomplished using CSS properties such as transform, transition, and scale. The transform property is used to scale the image, while transition ensures a smooth effect.

Example 1: Simple Image Enlargement on Hover

In this example, we will use the transform property with scale to enlarge the image and the transition property to smooth out the enlargement.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enlarge Image on Hover</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Enlarge Image on Hover Example</h1>
  <img src="image.jpg" alt="Sample Image" class="enlarge-on-hover">
</body>
</html>

CSS (styles.css):

.enlarge-on-hover {
  width: 200px;
  height: auto;
  transition: transform 0.3s ease;
}
.enlarge-on-hover:hover {
  transform: scale(1.5);
}