Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-06-2011, 04:09 PM   PM User | #1
hiyatran
New Coder

 
Join Date: Jun 2010
Posts: 36
Thanks: 1
Thanked 0 Times in 0 Posts
hiyatran is an unknown quantity at this point
Highlight Image in CSS

I have this:
Code:
img.decor{
	text-decoration:none;
	border:#CCCCCC thin solid;
	padding: 4px;
}
My HTML:
Code:
<a href="google.com"><img class="decor" src="images/birds.jpg" /></a>


when I hover over the image "decor" in my CSS, I would like the whole image to turn grey. I tried this:
Code:
img.decor a:hover{background-color:#CCCCCC;}
but it doesn't work. Any ideas??
I just start learning CSS. thanks
__________________
Daily Hot Deal
hiyatran is offline   Reply With Quote
Old 04-06-2011, 04:34 PM   PM User | #2
teedoff
Senior Coder

 
Join Date: Aug 2010
Location: High Point, NC
Posts: 3,325
Thanks: 5
Thanked 363 Times in 360 Posts
teedoff is on a distinguished road
One option would be to create a copy of the image but add a sepia or grey effect to it. Then save that image and link it to your hover style rule.
__________________
Teed
teedoff is offline   Reply With Quote
Old 04-09-2011, 12:20 AM   PM User | #3
hiyatran
New Coder

 
Join Date: Jun 2010
Posts: 36
Thanks: 1
Thanked 0 Times in 0 Posts
hiyatran is an unknown quantity at this point
can you give me an example of how I can go about doing this

thanks
__________________
Daily Hot Deal
hiyatran is offline   Reply With Quote
Old 04-09-2011, 12:46 AM   PM User | #4
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Hello hiyatran,
It's called a CSS rollover. Have a look at a css rollover demo here.

That demo uses 3 images combined for a link, a hover and a visited state.
It looks like you need the link/visited as one state and the hover/active as another so only 2 images would be needed to do what you want. The technique is the same.
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:12 AM.


Advertisement
Log in to turn off these ads.