Skip navigation
Currently Being Moderated

hover effect css

Mar 3, 2013 4:08 PM

I have boxes on my page (created with divs) each box has a different background color, i would like the box to go to 40% opacity upon rollover, does anyone know what the css code is to do this, without having to create two different colored boxes?  i know that it is the hover: effect but not sure of the exact code, thanks!

 
Replies
  • Currently Being Moderated
    Mar 3, 2013 4:16 PM   in reply to thefortunecookieguy

    The opacity property will make everything inside a div dim to whichever value is chosen.  If you use RGBA, your text won't fade out.

     

    #divName {

    background:rgba (255,255,255,1.0)  /**white, 100%**/

    }

     

    #divName:hover,

    #divName:active,

    #divName:focus {

    background:rgba (255,255,255,0.4)  /**white, 40%**/

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 5:39 PM   in reply to thefortunecookieguy

    It's still not clear to me if you want your background-color's opacity to change or the entire div.

     

    #box150trad {

    opacity: 1.0;

    }

     

    #box150trad:hover {

    opacity: 0.4;

    }

     

    A link might help us better understand your requirements.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 9:05 AM   in reply to thefortunecookieguy

    In your CSS you have an unclosed rule so you need to fix that (missing "}".) Then do this (additional ":link" to Nancy's) :

    #box150trad:link {

        opacity: 1;

    }

     

    #box150trad:hover {

        opacity: 0.4;

    }

    --
    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 9:38 AM   in reply to thefortunecookieguy

    From line 101 you have:

    #wrapper #body #middlepage #box150trad {

          float: right;

          height: 50px;

          width: 50px;

          background-color: #06F;

          margin: 2px;

          padding: 2px;

          text-align: center;

    #box150trad {


     

    opacity: 1.0;


     

    }

     


     

     

    #box150trad:hover {


     

    opacity: 0.4;


     

    }

     

     


     

     

     

    }

    Change to:

    #box150trad {

          float: right;

          height: 50px;

          width: 50px;

          background-color: #06F;

          margin: 2px;

          padding: 2px;

          text-align: center;

    }


    #box150trad:link {

         opacity: 1.0;

    }


     

    #box150trad:hover { 

         opacity: 0.4;

    }

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 4, 2013 11:37 AM   in reply to thefortunecookieguy

    Older IE browsers are not standards based so they don't support many of the CSS2 and CSS3 properties.  Live with it.  It's not going to make or break your site.

     

    MS Filters have nasty side effects which make text appear really awful. I prefer to avoid filters.  If your customers are still using older IE, they just won't see all the great eye candy.  Chances are they won't know what they're missing anyway.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 6, 2013 9:45 AM   in reply to thefortunecookieguy

    I don't care much for opacity because it dims everything including the text.  I think RGBA backgrounds or a box-shadow: inset would be more effective here.

     

    Having said that, you can add font-weight: bold to the hover rules you have now.

     

    #trad250:hover {

    opacity:0.4;

    font-weight:bold;

    }

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points