2013-08-09

Efficient way of changing the image on hover

It’s a common thing that we change the images on mouse hover of the buttons and other selectable/clickable items. But did you notice that if the connection is slow, it takes time to render the images we are displaying on the hover state? That breaks the UI and it’s not a good user experience.

To get rid of that pain, we can use a trick. We can combine the images for the two states (hover and normal state) and set the background position on hover of the element. Something like below should work. Make sure you correctly append the two images using a photo editing software.

#imgBtn{
   background: url('/Images/SaveCombined.png');
}

#imgBtn:hover{
    background-position: 0 -50px;
}

The above CSS will set the vertical value of the background position to –50px on hover state. So, instead of swapping images on the hover state, it will simply change the background position of the one image. It will result in image position go upwards. Give the correct value for the vertical position of the background so it will display the other part of the image which should be visible for the hover state.

That’s it!

1 comment:

Frank Stenly said...

I am not much familiar with CSS but one thing is sure that it should appear properly with better quality. Mobile Apps Development Company is willing to give device compatibility for apps.