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 to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Code for opacity on mouse over

    Hi,

    I'm looking for the code so that when I mouse over an image the image will highlight and then when I mouse off it will return to normal. I've seen it around and would be keen to give it a go.

    Cheers.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    How about this?

    Code:
    img { opacity: 0.5; }
    img:hover { opacity: 1; }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Code:
                
                   function setOpacityCSS(obj, curOpac){
                        if(typeof(obj.style.opacity) == 'string'){
                            obj.style.opacity = curOpac/10;
                        } else {
                            obj.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
    where curOpac is between 1-10.

    The above function will handle most browsers that do not support the opacity style.

  • #4
    New to the CF scene
    Join Date
    May 2011
    Location
    India
    Posts
    3
    Thanks
    0
    Thanked 2 Times in 2 Posts
    img { opacity: 0.5; filter:alpha(opacity=50)" }
    img:hover { opacity: 1; filter:alpha(opacity=100)" }

    This works for IE also

  • Users who have thanked sreerekha19 for this post:

    Adifen (05-30-2011)


  •  

    Tags for this Thread

    Posting Permissions

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