The easiest and quickest way to create zoom effects on hover in Tailwind CSS is to use the scale utilities (scale-*) and transition timing utilities (ease-in, ease-out, ease-in-out).
The strategy here is to add a small scale in a normal state and use a larger scale on hover:
<img class="scale-50 hover:scale-75" src="" />In addition, we use transition utilities to make the transition smooth:
<img class="scale-50 hover:scale-75 ease-in duration-500" src="" />Full example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Sling Academy</title>
</head>
<body>
<div>
<img class="scale-50 hover:scale-75 ease-in duration-500"
src="https://www.slingacademy.com/wp-content/uploads/2022/10/lovely-dog.jpeg" />
</div>
</body>
</html>Output:
That’s it. Happy coding & have a nice day!
