Your Ad Here

advanced code snippet search

Posted By

anvilcity on 06/10/10


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

kubaitis
TraceyM


CSS Sprites w/out Using Background Images

 / Published in: CSS
 

URL: http://www.sohtanaka.com/web-design/css-sprites-wout-background-images/

We keep the markup nice and simple by only using the elements that we need. We use the as the mask, and have our tag the one that shifts from one state to another.

Similar to how the regular CSS Sprites work, we specify the exact width and height of our sprite dimensions. Adding an overflow: hidden; allows us to achieve the masking effect by hiding anything that spills out of its specified boundaries.

To show the hover state, we simply add a negative top margin of the same height as the visible sprite area. Take a look at the height and margin-top in the code below.

Expand | Embed | Plain Text 
  1. <div class="affiliates">
  2.     <a href="#"><img src="rokkan.gif" alt="" /></a>
  3.     <a href="#"><img src="1md.gif" alt="" /></a>
  4.     <a href="#"><img src="designcubicle.gif" alt="" /></a>
  5. </div>
  6.  
  7. .affiliates a {
  8.     width: 204px; height:182px; 
  9.     overflow: hidden;
  10.     float: left;
  11. }
  12. .affiliates img {
  13.     border: none;
  14. }
  15. .affiliates a:hover img {
  16.     margin-top: -182px;
  17. }

Report this snippet  

You need to login to post a comment.