Skip to content

Instantly share code, notes, and snippets.

@joshkehn
Created February 11, 2014 19:11
Show Gist options
  • Save joshkehn/8941877 to your computer and use it in GitHub Desktop.
Save joshkehn/8941877 to your computer and use it in GitHub Desktop.
CSS background image preloading without JavaScript. Includes LESS mixin.
.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");
}
// 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");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment