Photo Corners headlinesarchivemikepasini.com
A S C R A P B O O K O F S O L U T I O N S F O R T H E P H O T O G R A P H E R
Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.
Site Tweak: Enlarge on Hover
22 June 2023
We're a little late to the party on this one but we have a good excuse. It had nothing to do with the appetite of our dog, either.
Ed Lee Statue at Chase Center. Hover over (or tap) this image to see the full-resolution version.
In our review of Photoshop's Depth Blur we introduced a new feature that enlarges an image when you hover over it (or, on your phone, tap on it).
The good excuse we have for not doing this sooner is that we like to be very precise about the dimensions of our images so the HTML loads quickly. Knowing the dimensions means the page can load without the image data.
At under 200K each, our image data isn't burdensome, but we like to play by the book.
We experimented with a couple of ways to implement this.
To make hover enlargements feasible, you have to download the full-size image and scale that data down to the thumbnail so when you hover, you see the full-size images.
The full-size dimensions, though, are never specified.
We can specify a width of 100 percent or a scale of 1.75, say, but we can't say display the original at its specific full-size height and width in pixels.
In our tests, that doesn't seem to matter. You get the full size image on hover, however we specify it.
But we're still queasy about scaling down for the thumbnails. We were just brought up not to do that.
We experimented with a couple of ways to implement this.
Our first shot was to make all the IMG tags enlargeable whether or not they had a higher resolution image than the initial display. This was a bit indiscriminate. The Twitter icon, for example, would enlarge just like a featured image.
So we set it up so only certain areas we defined would enlarge. Rollovers, for example. Or featured images. Anything we wanted but we had to wrap the usual code in the area definition.
We liked that better.
We're continuing to experiment but we think we've finally found a good solution to the problem of displaying rollover screenshots with a bit more detail than the 500 pixel thumbnails provide.
They're often good enough. And when we think you'll want to study an image, we'll continue to pop it up in a separate window. But enlarging on hover seems, despite the imprecision, to be a nice addition to our options.
Let us know, though. You're the boss.