Advanced Search

CSS Image Replace

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.