Fallback for CSS3 transitions

Question

I have a CSS3 transition that resizes/positions an image inside a div on hover.

FIDDLE

This works as desired but my concern is about browsers that don't support CSS3 transitions like IE9-. Would it be possible to write this CSS code so that these browsers have a fallback?

Idealy, the fallback should display the image so it fits the div and isn't zommed (fiddle example) and with no animation on hover.

I would prefer a CSS only solution and to not to alter the markup.

Full code example :

HTML :

<div><img src="http://lorempixel.com/output/people-q-c-1000-500-7.jpg" />

CSS :

div{
    overflow:hidden; 
    width:500px; 
    height:250px;
    position:relative;
}
img{
    display:block;
    position:absolute;
    height:auto;
    width:200%;
    left:-30%;
    top:-60%;

    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}
div:hover img{
    width:100%;
    top:0;
    left:0;
}

Answer 1

You could use Modernizr or go through the javascript feature detection route.

Both ways are detailed here: Detect support for transition with JavaScript

Answer 2

Generally speaking, CSS transitions (and most of CSS, really) were designed with progressive enhancement in mind. The intended fallback in browsers that don't understand transitions is quite simply to ignore the transition properties themselves. This allows the style changes to still take place, only immediately and not in a smooth transition (as implied by the name), and obviates the need for complex workarounds.

What you're looking to do however is to not have any change in state occur at all; you want your image to be fixed in the unzoomed state. That will take a bit more work.

If @supports had been implemented in the beginning, you could easily get away with

img{
    display:block;
    position:absolute;
    height:auto;
    width:100%;
    top:0;
    left:0;

    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}

@supports (-webkit-transition-property: all) or (transition-property: all) {
    div:not(:hover) img{
        width:200%;
        left:-30%;
        top:-60%;
    }
}

But of course, not everything works that way. It's a real shame that @supports was proposed so late and implementations still haven't caught on. But I digress.

Looking at the support tables at caniuse.com, it looks like Gecko- and WebKit/Blink-based browsers are extremely well covered (except maybe Firefox 3.6 and older), which is a relief because I can't think of any pure CSS-based solution to cater to those engines (other than ugly hacks).

For other browsers, I can see some other workarounds:

• It may be worth including the -o- prefix if you care about Presto Opera.

• Likewise with -moz- if you care about Firefox < 16.

• For IE, simply hiding the div:not(:hover) img rules in conditional comments is enough, since the first version of IE to support transitions and ignore conditional statements happens to be the same — version 10:

  <!--[if !IE]><!-->
  <style>
  div:not(:hover) img{
      width:200%;
      left:-30%;
      top:-60%;
  }
  </style>
  <!--<![endif]-->
  

  Note the use of div:not(:hover) here, analogous to the hypothetical @supports example above. You will need to swap the declarations with your img rule accordingly.

Answer 3

Lets not lie ourselves, the only browser we are talking about is IE9, so just go add:

width: 200%\9;
left: -30%\9;
top: -60%\9;

and IE9 will use it. We can just hope in 2017 there will be no more need for CSS hacks.