Image Enlarge with CSS

Here's an effect I like. There are two thumbnails below. The viewer is approaching Chicago on North Lake Shore drive. If you hover over the images, they should enlarge in the space of about 2 seconds. On mouseout, the images should shrink to their original size. Both do essentially the same thing, though with slightly different CSS coding (and no javascript). The second example proved difficult at first. The enlarging picture kept disappearing behind the post-area container until I figured out how to make it stay on top. I'm thinking of applying this to my art gallery thumbnails, but there is a problem: the effect may not work in older browsers, i.e., IE 9 and earlier. I welcome feedback from any for whom the effect does not materialize.





----------------------------------

-------------------


Comments


Add comment

William Luse
wmluse@yahoo.com
142.196.146.86
Submitted on 2016/04/27 at 3:08 pm

Okay. Funny how different browsers react to things.


Don
shuffly.net/zoop/
tancos@tancos.net
70.179.178.174
Submitted on 2016/04/26 at 6:07 pm

There’s no change to the behavior of either method.

I’m probably the last person in North America to still use that version of Safari, so I doubt that it’s worth fretting over.


Unapprove | Reply | Quick Edit | Edit | History | Spam | Trash

William Luse
wmluse@yahoo.com
142.196.129.186
Submitted on 2016/04/25 at 2:28 am

Don, try method 1 again. It should flow over everything with no transparency. If the effect doesn’t work, the viewer can still click on the image to enlarge.


William Luse
wmluse@yahoo.com
142.196.129.186
Submitted on 2016/04/25 at 1:25 am

I’m still working on the transparency issue. I think it has to do with the stack order of elements. The picture’s not really transparent, but functions as a background image to the comment part of the page.

But since you’re using 6.2.8, I’m still puzzled as to why method 1 expands instantaneously rather than gradually.


Don
shuffly.net/zoop/
tancos@tancos.net
70.179.178.174
Submitted on 2016/04/24 at 7:08 pm

I’m using Safari 6.2.8. I checked the second image on the front page, and there it is opaque.

I also tried Chrome “Version 49.0.2623.112 (64-bit).” With it, both images zoom out properly, though the second is still transparent on the comment page.


William Luse
wmluse@yahoo.com
142.196.129.186
Submitted on 2016/04/22 at 12:01 am

TSO, you got a link to the book?

Don, I’ll take a look at the coding and see if it’s fully up to date to accommodate all modern browsers. I too see the transparency in method 2, but only on this page (the comment page), not on the front page. I am a little bothered that method 1 expands instantaneously. (It used to do that for me, too, until I changed the coding; I’m using IE 11). The 2 second effect is accomplished with the CSS3 transition property. The earliest version of Safari that supports this property is 6.1. What are you using?
I’m still considering a javascript solution, because that would likely display across many more browsers than pure CSS.

Don
shuffly.net/zoop/
tancos@tancos.net
70.179.178.174
Submitted on 2016/04/21 at 10:12 am

Both work for me in an older version of Safari. However, the first one immediately expands to full size rather than taking two seconds to zoom, and the second one is transparent when enlarged. I can read TSO’s comment through it.


TSO
tom@smithcrew.com
155.188.123.20
Submitted on 2016/04/21 at 9:07 am

Hey Bill, thought you might like this…I made a book for my Mom via lulu filled with accounts of our 18 years of annual 20-30 mile bike rides. I took a picture of your art work of the cows in the field and used it as my cover. Mom loved the art and asked how I found a painting of the exact scenery we pass on our rural Ohio bike rides. I said it wasn’t, actually, and I told her that you’d painted it