Posted By

gera3d on 08/27/10


Tagged

image replace


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jplr
wirenaught


CSS Image Replace


 / Published in: CSS
 

The top image cant be a PNG. This is because the code just make the top image disappear and if the PNG has a transparency to it you will be able to see right through it.

  1. /* =HTML
  2. -------------------------------------------------------------- */
  3. <div class="haven">
  4. <a href="#">
  5. <img src="<?php bloginfo('template_directory'); ?>/images/haven_g.png" alt="" title="brookhaven_logo"/>
  6. </a>
  7. </div>
  8.  
  9. /* =CSS
  10. -------------------------------------------------------------- */
  11. div.haven {
  12. height: 44px;
  13. width: 278px;
  14. margin:0;
  15. padding:0;
  16. background-image:url("images/haven.png");
  17. }
  18.  
  19. div.haven a, div.nav a:link, div.nav a:visited {
  20. display:block;
  21. }
  22.  
  23. div.haven img {
  24. width:100%;
  25. height:100%;
  26. border:0;
  27. }
  28.  
  29. div.haven a:hover img {
  30. visibility:hidden;
  31. }

Report this snippet  

You need to login to post a comment.