13 Replies Latest reply: Mar 6, 2013 9:45 AM by Nancy O. RSS

    hover effect css

    thefortunecookieguy Community Member

      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!

        • 1. Re: hover effect css
          Nancy O. MVP

          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.

          • 2. Re: hover effect css
            thefortunecookieguy Community Member

            nancy,

             

            if this is my current css how should it look with the included hover code?

             

            }
            #wrapper #body #middlepage #box150trad {
            float: right;
            height: 50px;
            width: 50px;
            background-color: #06F;
            margin: 2px;
            padding: 2px;
            text-align: center;

            }

            • 3. Re: hover effect css
              Nancy O. MVP

              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.

              • 4. Re: hover effect css
                thefortunecookieguy Community Member

                i would love to be able to post it online but i can't.  here is my situation.  i currently have a site up at coloredfortunecookies.com, the site was created in frontpage, i have tried to upload a new site in dreamweaver but i can't get it to post, in dreamweaver my remote server shows that my files are on their server, yet all i see is the old website.  do i somehow have to clear that site off first, or should my new site just override what i currently have uploaded???  any ideas??

                • 5. Re: hover effect css
                  thefortunecookieguy Community Member

                  okay, was finally able to get the site working so i can just post my info there.  if you go to my site http://www.coloredfortunecookies.com you will see to the right hand side of the page there are a series of boxes, i will eventually have quite a few boxes setup there, but when a mouse hovers over each box i would like the box to become about 40% more opaque, how do i do this?

                   

                  i know that i created an external style sheet which may cause problems with you view my current code, but i think it is above in a previous post, thanks.

                  • 6. Re: hover effect css
                    kennethkawamoto2 Community Member

                    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/

                    • 7. Re: hover effect css
                      thefortunecookieguy Community Member

                      thanks ken. i am brand spankin new at this and appreicate all the help for the new guy.

                       

                      where was the missing "}" and just so i understand it correctly what should the final css code for #box150trad look like?

                       

                      thanks!

                      • 8. Re: hover effect css
                        kennethkawamoto2 Community Member

                        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/

                        • 9. Re: hover effect css
                          thefortunecookieguy Community Member

                          great, works good in chrome, but i am also using an older version of IE, i read somewhere that in order for all browers to see it the same you needed to add some different code below the "opacity: " it was something filter:alpha (opacity=40); is this necessary?

                          • 10. Re: hover effect css
                            Nancy O. MVP

                            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.

                            • 11. Re: hover effect css
                              thefortunecookieguy Community Member

                              makes sense, why microsoft is so not up to date on these things baffles me.

                              • 12. Re: hover effect css
                                thefortunecookieguy Community Member

                                hello all. on my site i am wanting to use the hover code but just have a few questions.

                                the code i have right now makes the boxes go 40% opaque when they are hovered over, i am wanting to have the text in the box go bold and the color of the box go 40% opaque, i played with the code a bit but couldn't quite get it to work.

                                 

                                on my site www.coloredfortunecookies.com to the right hand side you will see the quick order guide, the first box is "12 cookies" when you hover over this the text goes bold, on all the other boxes the color goes opaque, how do i combine these two, the text will go bold and the box color opaque, any ideas?

                                • 13. Re: hover effect css
                                  Nancy O. MVP

                                  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.