3 years ago

Category: PHP, javascript

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. For instance, I use a library called https://github.com/terrymun/Fluidbox (which is written in jQuery) to provide image magnification on my blog. This is of course comes at a price since you’ll need to include the library on the page where you need this.

So, if you want to avoid these libraries (and JavaScript), you can use this quick and dirty way where the image magnification can be replicated using only “one line” of CSS.

All you need to do is set the good old https://developer.mozilla.org/en-US/docs/Web/CSS/transform CSS property on image hover.