-1

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?

davidbuzatto
  • 9,207
  • 1
  • 43
  • 50
dvlden
  • 2,402
  • 8
  • 38
  • 61
  • You want a button that only apears when the mouse enters ir and disapears when the mouse goes out? – davidbuzatto Jul 23 '12 at 22:20
  • well I got that button my mate... I just want that button that instantly appears and go away, to appear and go away smoothly as an fadeIn, fadeOut effect... :) – dvlden Jul 23 '12 at 22:21
  • Hmmm I assume so ? Never heard of blink effect but just like from that blend demo link... Except that he have normal and hover image and I have only hover image. – dvlden Jul 23 '12 at 22:26

1 Answers1

2

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/

PeteGO
  • 5,597
  • 3
  • 39
  • 70
  • Well I knew about this already... Havent thought that it may actually work for this case. Thanks man. Problem solved. – dvlden Jul 23 '12 at 22:37