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.
HTML:
<ul> <li class="example"><a href="#">Link</a></li> </ul>
CSS:
.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!
Topher
Chris has a real passion for design and loves to share inspiration and tutorials with the design community. He's the curator here at designshifts.com, a freelance web consultant and developer and has a passion for the great outdoors.
Follow Me:
celery designs – eco-tools
Re-nourish – Rethink design!
