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.

4 Comments

  1. Pingback:Marc Brooks | No Photoshop Necessary: A Quick Guide to 3D Text Stylin’

  2. Hi, just wanted to mention, I enjoyed this blog post. It was inspiring. Keep on posting!

  3. Hey There. I discovered your blog using msn.
    That is a really neatly written article. I will make sure to
    bookmark it and return to read more of your helpful information.
    Thanks for the post. I will certainly comeback.

  4. Appreciating the hard work you put into your website and
    detailed information you offer. It’s great to come across a blog every once in a
    while that isn’t the same unwanted rehashed information.
    Excellent read! I’ve saved your site and I’m including your RSS feeds to my Google account.

Leave a Comment

Your email address will not be published. Required fields are marked *