SITH - CSS3 technique for smooth image change

Good day, Habr!

I would like to tell you how I achieved a smooth change in the color of the icons when I hover over them. A similar problem is common on Facebook. If the icon is a blue silhouette on a white background, then when you hover over, both colors change places, and this happens instantly and looks a bit sharp. My aesthetic feelings were hurt, and I developed my solution.

Having not seen anything like this on the Internet, I took the responsibility to call this method SITH (Soft Image Transition on: Hover) - a smooth transition of the image on hover.

SITH - CSS3 Soft Image Transition on: Hover

Under the habrakat you will find a full description of the equipment, all the code, a few screenshots and a link to the demo version.

Nobody generally prohibits using different transparency values.


But this approach will not allow us to smoothly change colors in the two images below.


My method is based on the fact that one image is on top of another, and they smoothly change their transparency to opposite values. If at the moment the transition added using the transition property from CSS3 is not completed, then one of the images is always visible to the user.

HTML code:


CSS: The following image shows the process itself. A working example can be tried here.
.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;
}






Also popular now: