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.
<div class="affiliates"> <a href="#"><img src="rokkan.gif" alt="" /></a> <a href="#"><img src="1md.gif" alt="" /></a> <a href="#"><img src="designcubicle.gif" alt="" /></a> </div> .affiliates a { width: 204px; height:182px; overflow: hidden; float: left; } .affiliates img { border: none; } .affiliates a:hover img { margin-top: -182px; }
You need to login to post a comment.
