Comparing Photos

Many readers of this blog are bloggers themselves. This post illustrates a handy photo blog technique – comparing photos. It’s one you’ve seen often and may have wondered how to do it yourself.

Today I’ll illustrate two basic versions of an image comparison technique. More will be shown tomorrow. The 3rd & final post will discuss the HOW-TO.

#1 – Image Fade

_DSC4327_nx_DSC4327_nx sep2

#2 – Vertical Image Flip

_DSC4327_nx
_DSC4327_nx sep2

 

#3 – Horizontal Image Flip

_DSC4327_nx
_DSC4327_nx sep2

If one or more of these techniques doesn’t change the image on your browser, the cause is an unsupported browser (most likely an OLD release). If this happens to you (it should not since I’ve added a ton of code to prevent it), I’d appreciate a reply that tells me what browser (e.g. Firefox) and what release (e.g. 31) you’re using.

Older versions of Internet Explorer (pre-IE v10) are notorious for failure to abide by international standards.


Subscribe (see sidebar) and don’t miss anything. New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

16 thoughts on “Comparing Photos

  1. Hi Ed, I am running Firefox Yahoo Edition V35.0 and all your whistles & bells work just great !!
    Thanx

  2. Yep, they are working (somewhat). The upper photo starts out upside down and flips correctly, however it turns to color while doing so, then turns back to B & W, then goes back upside down when you move the mouse off of it. The second photo flips as I would expect it to.

    • Thanks for sticking with me. I’ll go back to the drawing board on this. The problem appears to be uniquely Safari. I can check it here for the latest updates of Firefox, Chrome and IE. I’ll try to download Safari and see what happens. Safari is supposed to work from 7.1 and on with a vendor specific fix (which I missed on the original post). Hmmm??

        • Downloading Safari didn’t help. I’m on a PC and Apple stopped supporting the Win browser (no new updates) in 2012. That’s like going back to the stone-age in terms of evolving web standards. I’ll keep looking since the Mac version should work (at least per the specs, but maybe Apple overlooked something here when they finally decided to conform to the new CSS3 transform standards and this is a real-life bug in their browser – doubt it though).

    • Good news: It’s not rocket science
      Bad news: If you have a WordPress.com account (as opposed to .org) you’ll have to upgrade your theme to Premium because the how-to requires CSS customization.

    • As the standards evolve and new features are added, some lines of code with these new items require a so-called “vendor-specific-prefix” before they’ll work on a vendor’s browser. With hundreds of lines of code it’s too easy to miss one of the “special-need” items. In this case there was a line
      backface-visibility: hidden;
      that needed a prefix like this for Safari
      -webkit-backface-visibility: hidden;
      and I missed it.

      Glad to hear that did the trick.

Comments are closed.