Design, CG Graphics & Inspiration
SITH – CSS3 Technique for Soft Image Transition

SITH – CSS3 Technique for Soft Image Transition

I would like to tell you about how I obtained the smooth changing of icons’ colors when hovering the cursor over them. You can often see a similar problem on Facebook. If an icon is a blue silhouette on a white background, then when hovering the cursor both colors switch their places and it looks a bit sharp as it happens instantaneous. My aesthetic feelings were offended, and I decided to work out my own decision.

I haven’t met anything similar on the spaces of Internet, so I undertook the responsibility to name this method SITH (Soft Image Transition on: Hover) it is a smooth image transition when hovering the cursor on it.

Below you will find complete description of this technique, the code, few screen shots and link to the demonstration version.
Generally nobody forbids using the different values of transparency.

But such approach will not let us smoothly change the colors of two images below

The base of my method is that one image is above the other, and they fluently change their transparency for the opposite values. If the transition added through the transition property from CSS3 is not being accomplished at the moment, then user can always see one of the images.

HTML Code

 <div class="trash"><b></b></div>

CSS Code

.trash, .trash b {

 display: block;

 width: 24px;

 height: 21px;

 background: url(/demo/img/trash-sprite.png) no-repeat 0px -21px;

 cursor: pointer;

 -webkit-transition: .5s opacity;

 -moz-transition: .5s opacity;

 -ms-transition: .5s opacity;

 -o-transition: .5s opacity;

 transition: .5s opacity;

}

.trash {

 position: relative;

 background-position: 0px 0px;

}

.trash b {

 position: absolute;

 top: 0;

 left: 0;

 opacity: 0;

}

.trash:hover b {

 opacity: 1;

}

The next picture presents the process itself.

Here you can test the working example.

You might also be interested in..

How to Achieve Text Fading Effect in CSS3
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
Sprite animation in CSS3
CSS3 Now! Transitions
Sprite animation in CSS3
CSS3 Now! Transitions
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • Denis Bobrovnikov,
  • November 2, 2011

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • I’ve been looking into CSS transitions a bit this week and this is another nice idea to add to my list. Thanks for showing us how this would work.

  • Maxx Design

    exellent article

  • Amazing post!! Really, really useful resource. Thanks!

  • Great, thanks for sharing.

  • Thanks for the code. Very useful … appreciated.

  • This is brilliant, in the past I would of used a javascript todo this. I came across this blog by mistake and now I have learnt something really useful. A bit time  consuming having to make sprites for each rollovers, but useful in a navigation as a background image I think.

  • Good write-up. I am a regular visitor of your website and appreciate you taking the time to maintain the excellent site. I will be a frequent visitor for a really long time.

  • I’ve been looking into CSS transitions a bit this week and this is another nice idea to add to my list. Thanks for showing us how this would work.

  • Maxx Design

    exellent article

  • Amazing post!! Really, really useful resource. Thanks!

  • Great, thanks for sharing.

  • Thanks for the code. Very useful … appreciated.

  • This is brilliant, in the past I would of used a javascript todo this. I came across this blog by mistake and now I have learnt something really useful. A bit time  consuming having to make sprites for each rollovers, but useful in a navigation as a background image I think.

  • Good write-up. I am a regular visitor of your website and appreciate you taking the time to maintain the excellent site. I will be a frequent visitor for a really long time.