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.
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!
About Author
I'm the curator here at designshifts.com as well as being a web developer by day. I have a passion for design and love to share inspiration and tips and tricks with the community.
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;