Author Options:

how to do a css transition? Answered

I want to make a menu with background images that will devolve into another image when you hover over a category
The layout of my menu looks somewhat like the one of instructables-->(food | living | outside | play | technology | workshop)
but to make it look a bit nicer I want to make it fade and not just all of a sudden change the background without any transition at all.
I've found a html code which does exactly what i want but I don't know how to do this in css (in a way in which it is supported by all browsers) 

the html code:
 <img id="fade1" src="img1.jpg" class="opacity25" onmouseover="fade('fade1', 25, 100, 300)" onmouseout="fade('fade1', 100, 25, 300)" alt="" />
does anyone how to do this   |  in css?


The forums are retiring in 2021 and are now closed for new topics and comments.

9 years ago

How about using Javascript?

This tutorial is to fade into a photo from a loading image. You could use the fade function they use to change the opacity of the overlaying image to fade in your menu items on hover.

Source: http://clagnut.com/sandbox/imagefades/

The function they use:

function fadeIn(objId,opacity) {
   if (document.getElementById) {
     obj = document.getElementById(objId);
      if (opacity <= 100) {
       setOpacity(obj, opacity);
       opacity += 10;
       window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);


9 years ago

Using CSS alone? no, sorry, CSS doesn't work that way