/    Sign up×
Community /Pin to ProfileBookmark

Making a whole div translucent

Copy linkTweet thisAlerts:
Aug 29.2004

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?

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@JPnycAug 29.2004 — 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.
Copy linkTweet thisAlerts:
@Paul_JrAug 30.2004 — 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 [url=http://wellstyled.com/css-nopreload-rollovers.html]this page[/url].
Copy linkTweet thisAlerts:
@theuedimasterauthorAug 30.2004 — This looks awesome! I think I understand how the first one works... but I have no clue about the second:

http://wellstyled.com/files/css-nopreload-rollovers/example2.html#

Could you please explain to me how it works? Thanks!
Copy linkTweet thisAlerts:
@JPnycAug 30.2004 — It's just the CSS hover property. What don't you understand about it?
Copy linkTweet thisAlerts:
@Paul_JrAug 30.2004 — [i]Originally posted by theuedimaster [/i]

[B]This looks awesome! I think I understand how the first one works... but I have no clue about the second:



http://wellstyled.com/files/css-nopreload-rollovers/example2.html#



Could you please explain to me how it works? Thanks! [/B][/QUOTE]
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.

[b]***EDIT***[/b]

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.
Copy linkTweet thisAlerts:
@theuedimasterauthorAug 30.2004 — sweet, thanks a lot dude!
Copy linkTweet thisAlerts:
@Paul_JrAug 30.2004 — 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. ?
Copy linkTweet thisAlerts:
@TimeBanditSep 01.2004 — Here's a site that uses the "sliding door" thing for CSS rollovers.

www.gladeelementary.com

Here's a translucent effect without using opacity:

http://www.calvertschool.org/engine/content.do?BT_CODE=CES1515

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.
×

Success!

Help @theuedimaster spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...