Snippet: Image Zoom

As a Freelance Front End Developer, I’m often tasked with improving the feel of a site via the use of simple animations. So, I thought I’d share my favourites with short snippets.

The first one being a simple image zoom on hover using the transform: scale, and transition: cubic-bezier.

A neat example of this is..

<div class="img-zoom"><img src="https://jacktracy.co.uk/wp-content/uploads/2016/12/wsi-imageoptim-zoom_sample-300x300.jpg" alt="" width="300" height="300" /></div>HTML
.img-zoom {
	display: inline-block;
	overflow: hidden;

	img {
		transform: scale(1.04);
		transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

		&:hover {
			transform: scale(1.21);
		}
	}
}SASS
Back To Blog
Interested in working with me? Get In Touch