pre nav image hover

tanguy / 2012-08-30 14:53:44   
  1. hello everyone.
  2. so i would like the logo at the top of my site to blend from black to white on hover.
  3. this is what i added to the pre nav section :
  4. <div id="lnb">
  5. <img class="bottom"  width="167px" height="96px" src="/files/logoblanc.png" />
  6. <img class="top" width="167px" height="96px" src="/files/logo.png"/>
  7. </div>

and this is what i added to style.css

  1. #lnb {
  2. position:relative;
  3. height:96px;
  4. width:167px;
  5. margin:0 auto;
  6. }
  7. #lnb img {
  8. position:absolute;
  9. left:0;
  10. -webkit-transition: opacity 0.5s ease-in-out;
  11. -moz-transition: opacity 0.5s ease-in-out;
  12. -o-transition: opacity 0.5s ease-in-out;
  13. transition: opacity 0.5s ease-in-out;
  14. }

#lnb img.top:hover {
opacity:0;
}

but the top image is out of proportion and i don't understand why....
any ideas?
thanks.

tanguy

tanguy / 2012-08-30 14:57:43   

sorry about the code...
here is my site :
fsar.ch

thanks

arsondpi / 2012-08-30 15:33:25   

that's because there's already another class called .top (#index .top and it can be found in the base.css) and it overrides your css

The right way to do this is:

  1. <div id="lnb"><img class="bottom" src="/files/logoblanc.png" /><img class="toplogo" width="167px" height="96px" src="/files/logo.png"/></div>

(keep them in one line so you don't get break tags intervening...

and then

  1. #lnb img.toplogo:hover {
  2. opacity:0;
  3. }
tanguy / 2012-08-30 15:46:18   

resolved!!
thanks you!!

This thread has been closed, thank you.