CSS Mouseover
Is it possible to do a mouseover effect with an image using CSS? I checked the w3.org site, but that didn't help. Anybody know anything on this? Thanks
Is it possible to do a mouseover effect with an image using CSS? I checked the w3.org site, but that didn't help. Anybody know anything on this? Thanks
KeithMcL posted this at 00:35 — 23rd July 2003.
He has: 176 posts
Joined: Oct 1999
AFAIK it's not. Only javascript will accomplish that for you.
Suzanne posted this at 00:42 — 23rd July 2003.
She has: 5,507 posts
Joined: Feb 2000
heh, sure it is!
:hover is your friend.
The way to do it is to have the images as backgrounds, then flip the backgrounds on hover.
You can use extra spans to hide text for accessibility (i.e. if no CSS, the images won't show, but the regular text will).
KeithMcL posted this at 00:59 — 23rd July 2003.
He has: 176 posts
Joined: Oct 1999
Never though of doing it that way
Nice one!
Renegade posted this at 06:41 — 23rd July 2003.
He has: 3,022 posts
Joined: Oct 2002
display:block; will also work quite effectivly
Check my sites navigation:
http://chengeu.krayup.com/
Sorta what you were talking about?
D856C posted this at 11:58 — 23rd July 2003.
They have: 15 posts
Joined: Jul 2003
if you really want to see what CSS can do, check Eric Meyer's CSS Edge
kb posted this at 20:09 — 23rd July 2003.
He has: 1,380 posts
Joined: Feb 2002
ok guys, thanks
fifeclub posted this at 15:16 — 25th July 2003.
He has: 688 posts
Joined: Feb 2001
Thanks for the link. That's some cool css effects. Granted lots of that stuff could be done with js but that text flowing around irregular shapes (the fat chef) is impressive.
KeithMcL posted this at 20:32 — 25th July 2003.
He has: 176 posts
Joined: Oct 1999
Apparently you'll be able to make rounded corners with CSS 3. No more images, wohoo!
Suzanne posted this at 22:11 — 25th July 2003.
She has: 5,507 posts
Joined: Feb 2000
heh, you can do it with Mozilla now.
Renegade posted this at 00:39 — 26th July 2003.
He has: 3,022 posts
Joined: Oct 2002
haha you can? How?
Suzanne posted this at 01:09 — 26th July 2003.
She has: 5,507 posts
Joined: Feb 2000
-moz-border-radius: 15px;
For example.
blooberry.com has documentation on the -moz bits. It's proprietary, but unlike M$ proprietary bits, is identified properly as an extension.
Renegade posted this at 02:19 — 26th July 2003.
He has: 3,022 posts
Joined: Oct 2002
cool! thanks
D856C posted this at 02:37 — 26th July 2003.
They have: 15 posts
Joined: Jul 2003
Literary Moose goes even beyond the cutting edge, to CSS Destroy. Interesting experiments. Watch yourself.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.