Skip to content

Instantly share code, notes, and snippets.

@joshkehn

joshkehn/preload-example.css

Created February 11, 2014 19:11
Download ZIP

Revisions

  1. joshkehn revised this gist Feb 11, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion preload-mixin.less
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // Background with hover state and preloading mixin.
    .background-with-hover ($initial, $hover) {
    .background-with-hover ($initial; $hover) {
    background-image: url($initial);
    &:before {
    content: url($hover);
  2. joshkehn created this gist Feb 11, 2014.
    10 changes: 10 additions & 0 deletions preload-example.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    .arrow {
    background: url("../images/arrow-normal.svg") no-repeat top center;
    }
    .arrow:before {
    background: url("../images/arrow-hover.svg");
    display: none;
    }
    .arrow:hover {
    background: url("../images/arrow-hover.svg");
    }
    18 changes: 18 additions & 0 deletions preload-mixin.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    // Background with hover state and preloading mixin.
    .background-with-hover ($initial, $hover) {
    background-image: url($initial);
    &:before {
    content: url($hover);
    display: none;
    }
    &:hover {
    background-image: url($hover);
    }
    }

    // Usage example with the arrow above
    .arrow {
    background: no-repeat top center;
    .background-with-hover("../images/arrow-normal.svg",
    "../images/arrow-hover.svg");
    }