Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    39
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    39
    Thanks
    1
    Thanked 0 Times in 0 Posts
    can you give me an example of how I can go about doing this

    thanks

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •