-
-
Save willbowling/3131798 to your computer and use it in GitHub Desktop.
Compass fancy-hover - snazzy-looking image replacement hovers with an animated opacity ramp. Now using Compass sprites so you don't have to do the dirty work! See the demo at http://nathos.github.com/fancy-hovers/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin fancy-hover($sprite_dir, $off_state, $hover_state, $speed: 0.3s) | |
| $sprites: sprite-map("#{$sprite_dir}/*.png") | |
| $width: image-width(sprite_file($sprites, $off_state)) | |
| $height: image-height(sprite_file($sprites, $off_state)) | |
| +hide-text | |
| width: $width | |
| height: $height | |
| background: sprite($sprites, $off_state) no-repeat | |
| display: block | |
| position: relative | |
| span | |
| width: $width | |
| height: $height | |
| background: sprite($sprites, $hover_state) no-repeat | |
| display: block | |
| position: absolute | |
| top: 0 | |
| left: 0 | |
| opacity: 0 | |
| +transition(opacity, $speed, ease-in-out) | |
| .no-opacity & | |
| visibility: hidden | |
| &:hover span | |
| opacity: 1 | |
| .no-opacity & | |
| visibility: visible |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="fancy-hover-links"> | |
| <ul> | |
| <li id='twitter'> | |
| <span></span> | |
| <!-- don't forget this empty span! --> | |
| </li> | |
| <li id='facebook'> | |
| <span></span> | |
| </li> | |
| <li id='forrst'> | |
| Forrst | |
| <span></span> | |
| </li> | |
| <li id='rss'> | |
| RSS | |
| <span></span> | |
| </li> | |
| </ul> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // in this example, the "my_sprites" directory contains 8 pngs, 2 for each image | |
| // pass the sprite directory, the off state name, and the hover state name | |
| // you can optionally pass a fourth argument for the duration of the fade | |
| @include fancy-hover(my_sprites, twitter_off, twitter_on) | |
| // repeat for each pair of sprites you want to make fancy! | |
| @include fancy-hover(my_sprites, facebook_off, facebook_on) | |
| #forrst | |
| @include fancy-hover(my_sprites, forrst_off, forrst_on) | |
| #rss | |
| @include fancy-hover(my_sprites, rss_off, rss_on) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment