CSS Transition Tricks: Fading Images on the Road to Success

CSS3 Transitions are fun stuff! With only a couple dozen characters, it’s possible to create beautiful interactions with dynamic pseudo-classes, which once was relegated entirely to Flash or dozens of lines of JS.

Of course there are some problems, though. One must take into account all the idiosyncrasies of the myriad browser engines, and include their  vendor prefixes. The older, crappier browsers don’t support them at all, and if you’re expected to mimic the functionality in IE6, your are in for a very long, annoying day.

Benefits and speed bumps aside, it can be difficult sometimes to get exactly the transition you want. For example, when you’d like to transition one background image to another with a fade. Two images, without preloading, would make for a bit of a choppy experience when the GET request is made on the :hover event. It’s always a good idea to use a sprite instead.

  The quicker and smoother load, however, will cause the transition will default to a slide when you add a blanket transition:

a.example1 {
  background: transparent url(/img/personal.jpg) 112px 289px;
  border: 1px solid #999;
  display: block;
  height: 50px;
  width: 50px;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
a.example1:hover { background-position: 279px 289px; }

  Adding a bit of alpha to the element with the opacity parameter (and maybe a filter for OldIE), along with an opacity-specific transition, would do just the trick to make that transition fade in:

a.example2 {
  background: transparent url(/img/personal.jpg) 113px 289px;
  border: 1px solid #999;
  display: block;
  height: 50px;
  width: 50px;
  opacity: 0.7;
  -webkit-transition: opacity 0.25s linear;
  -moz-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
a.example2:hover { background-position: 279px 289px; opacity: 1; }

Granted, this fades the original out a little bit, it’s got a big of a hacky feel, and is best fit to this type of b+w to color transition. But it still looks pretty good, and would probably be perfect for a group of social media share icons.

Hope this helps someone, somewhere. Namaste.