How to Zoom on Hover with Tailwind CSS (the easiest approach)
The easiest and quickest way to create zoom effects on hover in Tailwind CSS is to use the scale utilities and transition timing utilities.
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>KindaCode.com</title>
</head>
<body>
<div>
<img class="scale-50 hover:scale-75 ease-in duration-500"
src="https://www.kindacode.com/wp-content/uploads/2022/05/dog-sample.jpeg" />
</div>
</body>
</html>Output:
Note: If you’re using Safari, this demo video might not work nicely or not start at all. Please use Chrome, Edge, Firefox, or another web browser instead.
Further reading:
- Tailwind CSS: Make a Div 100% Height & Width of the Viewport
- Tailwind CSS: How to Create Gradient Text
- How to Create Circle Buttons with Tailwind CSS
- CSS: Styling Scrollbar Example
- CSS Flexbox: Make an Element Fill the Remaining Space
- CSS @keyframes Examples
You can also check out our CSS category page for the latest tutorials and examples.
Subscribe
0 Comments
You May Also Like
