Hey, I was just wondering how to make a div translucent. Basically I want to have a dynamic nav bar, I know how to do a text one, but i think the text is too sloppy, so I want one with images. Bascially, I am going to have 2 divs one on top of each other, each with images inside, with opposite colors. When the user puts their mouse over the image, which is on top, the whole div will go translucent, showing the image beneath, and when the mouse is off, the div will go back to normal showing the image on top. Does anyone understand what I want to do?Not entirely, but here's the opacity commands for IE, Gecko, and Safari:
-moz-opacity:0.5;width:30%;opacity: 0.5; filter:alpha(opacity=50)
That makes em half translucent. You can put them all in the css. Each browser will ignore the commands for the other 2. Opera doesn't yet support the property at all. But you'll need JS for the dynamic change on mouseover. Hover only works on anchors in IE.This reeks of rolloverage.
Why not make the static and over images one image, set it as the link's background image, then adjust the position on :hover?
Since that probably made no sense, you might benefit from looking at this page (<!-- m --><a class="postlink" href="http://wellstyled.com/css-nopreload-rollovers.html">http://wellstyled.com/css-nopreload-rollovers.html</a><!-- m -->).This looks awesome! I think I understand how the first one works... but I have no clue about the second:
<!-- m --><a class="postlink" href="http://wellstyled.com/files/css-nopreload-rollovers/example2.html#">http://wellstyled.com/files/css-noprelo ... ple2.html#</a><!-- m -->
Could you please explain to me how it works? Thanks!It's just the CSS hover property. What don't you understand about it?Originally posted by theuedimaster
This looks awesome! I think I understand how the first one works... but I have no clue about the second:
<!-- m --><a class="postlink" href="http://wellstyled.com/files/css-nopreload-rollovers/example2.html#">http://wellstyled.com/files/css-noprelo ... ple2.html#</a><!-- m -->
Could you please explain to me how it works? Thanks!
What is it you don't understand? It's basically the same as the first (I think...); the static background and the hover background are one image that just changes position.
***EDIT***
Okay, I actually read the thing now.
The hover image is applied as a background to the parent element of the A tag, and the static image is applied as a background to the A tag. On :hover, instead of having the background change positions, as in the first example, the background for the A tag is completely removed, thus revealing the hover-state background of the parent element. It's kind of like what you wanted to do: The background image is removed to reveal the proper one beneath it.sweet, thanks a lot dude!No problem.
If I were any good with Photoshop I could draw up a great graphic illustrating the technique -- but I suck, so no cool illustration.
Here's a site that uses the "sliding door" thing for CSS rollovers.
<!-- w --><a class="postlink" href="http://www.gladeelementary.com">www.gladeelementary.com</a><!-- w -->
Here's a translucent effect without using opacity:
<!-- m --><a class="postlink" href="http://www.calvertschool.org/engine/content.do?BT_CODE=CES1515">http://www.calvertschool.org/engine/con ... DE=CES1515</a><!-- m -->
It's a small area but is set up so it can be translucent as surrounding areas grow. Look on right side of page, yellow area. In that yellow area you'll notice the bottom left of the area is a different shade than the area above it. The whole yellow area has a big seal in the background and it is one image, not parts. So the bottom-left area has a repeating image over that seal. Every other pixel in that repeatinhg graphic is white or light yellow (i forget, i did it months ago), and whatever is not white is transparent. So the image in the background appears to have a lighter colour shade over it -- fake translucense.
-moz-opacity:0.5;width:30%;opacity: 0.5; filter:alpha(opacity=50)
That makes em half translucent. You can put them all in the css. Each browser will ignore the commands for the other 2. Opera doesn't yet support the property at all. But you'll need JS for the dynamic change on mouseover. Hover only works on anchors in IE.This reeks of rolloverage.
Why not make the static and over images one image, set it as the link's background image, then adjust the position on :hover?
Since that probably made no sense, you might benefit from looking at this page (<!-- m --><a class="postlink" href="http://wellstyled.com/css-nopreload-rollovers.html">http://wellstyled.com/css-nopreload-rollovers.html</a><!-- m -->).This looks awesome! I think I understand how the first one works... but I have no clue about the second:
<!-- m --><a class="postlink" href="http://wellstyled.com/files/css-nopreload-rollovers/example2.html#">http://wellstyled.com/files/css-noprelo ... ple2.html#</a><!-- m -->
Could you please explain to me how it works? Thanks!It's just the CSS hover property. What don't you understand about it?Originally posted by theuedimaster
This looks awesome! I think I understand how the first one works... but I have no clue about the second:
<!-- m --><a class="postlink" href="http://wellstyled.com/files/css-nopreload-rollovers/example2.html#">http://wellstyled.com/files/css-noprelo ... ple2.html#</a><!-- m -->
Could you please explain to me how it works? Thanks!
What is it you don't understand? It's basically the same as the first (I think...); the static background and the hover background are one image that just changes position.
***EDIT***
Okay, I actually read the thing now.
The hover image is applied as a background to the parent element of the A tag, and the static image is applied as a background to the A tag. On :hover, instead of having the background change positions, as in the first example, the background for the A tag is completely removed, thus revealing the hover-state background of the parent element. It's kind of like what you wanted to do: The background image is removed to reveal the proper one beneath it.sweet, thanks a lot dude!No problem.
If I were any good with Photoshop I could draw up a great graphic illustrating the technique -- but I suck, so no cool illustration.
Here's a site that uses the "sliding door" thing for CSS rollovers.<!-- w --><a class="postlink" href="http://www.gladeelementary.com">www.gladeelementary.com</a><!-- w -->
Here's a translucent effect without using opacity:
<!-- m --><a class="postlink" href="http://www.calvertschool.org/engine/content.do?BT_CODE=CES1515">http://www.calvertschool.org/engine/con ... DE=CES1515</a><!-- m -->
It's a small area but is set up so it can be translucent as surrounding areas grow. Look on right side of page, yellow area. In that yellow area you'll notice the bottom left of the area is a different shade than the area above it. The whole yellow area has a big seal in the background and it is one image, not parts. So the bottom-left area has a repeating image over that seal. Every other pixel in that repeatinhg graphic is white or light yellow (i forget, i did it months ago), and whatever is not white is transparent. So the image in the background appears to have a lighter colour shade over it -- fake translucense.