I've been working on implementing a sprite image for each list item (home, services, and contact) in my project. Using CSS, I've managed to move the position on hover successfully. However, I now want to add a fade effect to the transition instead of it rapidly moving the position. My goal is to create the illusion of the button being pushed in when hovered over. I've spent all day trying to achieve this with no success. Any help would be greatly appreciated!
Here is the HTML code:
<ul id="navigation">
<li class="link1"><a href="index.html">Home</a></li>
<li class="link2"><a href="services.html">Services</a></li>
<li class="link3"><a href="contact.html">Contact</a></li>
</ul>
And here is the CSS code:
li.link1 {
text-indent: -9999px;
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;
}
li.link2 {
(CSS code repeats itself here)