Question

I’m not quite sure how to call the effect as I don’t understand the difference when you say javascript or jquery. I canno’t make anything.

So, I am making an menu in html/css and I want to make an fade effect when hovering menu item. I am not sure if such a thing exists, but I’ve found a few examples that are sort of it, but not exactly what I need.

http://greg-j.com/static-content/hover-fade.html

http://www.jacklmoore.com/blend

In both things there is the effect that I want but there are items/buttons with normal and hover part.

What I have is only hover state 🙂
So it is basically an image as background of menu and other image for hovering state.

Is there any chance to make this “appear/disappear” fade effect with just one image used for (hovering) or there must be normal and hover state to make it work?

Answer 1

Check out CSS3 transition.

Here is some CSS to fade an element on hover.

.fade 
{
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover 
{
    opacity: 0.5;
}

You just have to give your element the .fade class like this:

<p class="fade">This is my text element that will fade when you hover over it.</p>

Although it does not have to be text – it can be a button, an image, etc.

Taken from http://bavotasan.com/2011/a-simple-fade-with-css3/