Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: www.amitmerchant.com
Image magnifier using only one line of CSSCategory: 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.
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.
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers