In today’s quick tip, we’ll dive into creating a dynamic ‘zoom on hover’ effect that adds an interactive touch to images on your web pages. By incorporating the provided CSS, your images will elegantly scale up when hovered over. This effect, achieved with minimal code, is a fantastic way to enhance your website’s visual appeal and engage your visitors.

DEMO: Zoom on Hover

HTML

<img class="zoom-in" src="YOUR-IMAGE-PATH"/>

CSS

.zoom-in { transition:transform .2s; }
.zoom-in:hover { transform: scale(1.2); }