background icons hover

Icon hover states

Easily create overstates for icons with a background-image sprite:

Add to the end of the file: src/sass/module/_i.sass

// Pseudo class
//============================================
.i
  &::before
    content: ""
    display: block


// Hover
//============================================

.i-hover
  &::before,
  &::after
    transition: opacity 0.3s

  &::after
    +pos(0, top left)
    content: ""
    opacity: 0

.i-hover-target:hover,
.i-hover-target:focus,
.i-hover-target:active
    .i-hover
      &::before
        opacity: 0

      &::after
        opacity: 1

Change the sprite template: gulp/tpl/_sprite-background.scss

//===========================================
// Sprite Definition
//===========================================

// ATTENTION!!
// This file is autogenerated do not edit it manually!!!

// Vars
//===========================================


$i-map: (
  i-map-path: url("{{{cssPath}}}{{{sprite}}}"),
  i-map-width: {{#rem}}{{spriteWidth}}{{/rem}},
  i-map-height: {{#rem}}{{spriteHeight}}{{/rem}},
  {{#shapes}}

  i-{{name}}-width: {{#rem}}{{width.outer}}{{/rem}},
  i-{{name}}-height: {{#rem}}{{height.outer}}{{/rem}},
  i-{{name}}-position: {{#rem}}{{position.absolute.x}}{{/rem}} {{#rem}}{{position.absolute.y}}{{/rem}}{{^last}},{{/last}}
  {{/shapes}}
);


// Icon Mixin
//===========================================

%i {
  background-image: url("{{{cssPath}}}{{{sprite}}}")
}

@mixin extend-i-url($extend: true) {
  @if $extend {
    @extend %i
  }
}

// Common Styles
//===========================================

.i::after,
.i::before {
  @include extend-i-url(true);
}


// Mixins & classes
//===========================================

{{#shapes}}
@mixin i-{{name}}($add-url: true) {
  @include extend-i-url($add-url);
  background-position: {{#rem}}{{position.absolute.x}}{{/rem}} {{#rem}}{{position.absolute.y}}{{/rem}};
  width: {{#rem}}{{width.outer}}{{/rem}};
  height: {{#rem}}{{height.outer}}{{/rem}};
}

.i-{{name}} {
  width: {{#rem}}{{width.outer}}{{/rem}};
  height: {{#rem}}{{height.outer}}{{/rem}};

  &::before {
    @include i-{{name}}(false);
  }
}

.i-{{name}}-hover {
  &::after {
    @include i-{{name}}(false);
  }
}

{{/shapes}}

Stop the gulp watcher and rung again.

HTML Usage

<a href="..." class="i-hover-target">
  <i class="i i-hover i-my-icon i-my-other-icon-hover"></i>
</a>