Simple and Effective Pure CSS Image Hover Effect

It was suggested that I give my social connection buttons on my portfolio website a hover effect to help make them more accessible. I agree! This happens to be very easy process with CSS using 1 image (in this example the image is 70px height) so I thought I would share. Example image:

Using the psuedo-element ‘hover’ to apply the effect. When your mouse pointer moves over the .example class, our CSS slides the background image down showing the hover part of the image. This might be best in some cases for a simple hover effect, you will use less files, javascript can be turned off and older browsers will render your content much faster.


	<li class="example"><a href="#">Link</a></li>


.example { width: 35px; height: 35px; background: url(../images/example.png)  left bottom no-repeat; text-indent: -99999px;}
.example:hover { background-position: 0 0;}

It’s that easy!

  1. David

    Hi is any chance to add these -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;