Image magnifier using only one line of CSS
When you’re working with images on your website, it would be good if you can provide some sort of image magnification to your users when clicked/tapped/hovered over the images for better visibility.
This is of course comes at a price since you’ll need to include the library on the page where you need this. And it adds to your website’s overall response time.
One line of CSS all it takes
You heard it right. It all takes one line of CSS to achieve something like this. All you need to do is set the good old transform CSS property on image hover.
Here’s how this can look like.
And that is it! This is all you need and the image magnification will be there at your disposal.
Now, if you use it barebones like this, the transition to the magnified image would look jankier. This can be solved by using the transition CSS property and adding some smoothness to the animation. Couple this with the image’s cursor to pointer to make it seamless like so.
transition: transform .2s ease-out;
You can see this in action in this CodePen (Try opening it in another tab).
While this seems to work, this isn’t a perfect solution. For instance, you need to see which transform value would work for your interface using trial and error because if that isn’t nailed, the magnified image can even get out of the viewport.
So, you need to take care of things like these.
Like this article? Consider leaving aTip