Skip to content

Instantly share code, notes, and snippets.

@LottieVixen

LottieVixen/index.html

Created October 22, 2014 14:57
Show Gist options
  • Save LottieVixen/29b9cb718b7dbb6a64f5 to your computer and use it in GitHub Desktop.
Save LottieVixen/29b9cb718b7dbb6a64f5 to your computer and use it in GitHub Desktop.
Download ZIP
mouse over image change // source http://jsbin.com/munof
Raw
index.html
<style id="jsbin-css">
div {
}
div.button {
border: 3px silver solid;
margin:5px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAIAAABch4VNAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAhElEQVQYV2NY/6CeYdfTfoajr+YzHH25kGHDjWaG2cdTGdq2uTOUrzIG45r1VgzN21wYuvf5Mkw6GsYw80wCw4LLmQzLbxUzBKVbMYRnOjHE5HgyxGR7MQQl2zB4xugx2IcoMlj6iYOxdaA0g12IPINTuDKDa7QGg0ecDoN3ogGDX4opAKSyKc3FQnrsAAAAAElFTkSuQmCC);
overflow: hidden;
background-position: 0px -16px;
}
.button:hover {
background-position: 0px 0px;
}
</style>
<meta name="description" content="mouse over image change" />
<div class="button" style="width:80px;height:16px"></div>
<div class="button" style="width:80px;height:16px"></div>
<div class="button" style="width:80px;height:16px"></div>
<div class="button" style="width:160px;height:16px"></div>
<script id="jsbin-source-css" type="text/css">div {
}
div.button {
border: 3px silver solid;
margin:5px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAIAAABch4VNAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAhElEQVQYV2NY/6CeYdfTfoajr+YzHH25kGHDjWaG2cdTGdq2uTOUrzIG45r1VgzN21wYuvf5Mkw6GsYw80wCw4LLmQzLbxUzBKVbMYRnOjHE5HgyxGR7MQQl2zB4xugx2IcoMlj6iYOxdaA0g12IPINTuDKDa7QGg0ecDoN3ogGDX4opAKSyKc3FQnrsAAAAAElFTkSuQmCC);
overflow: hidden;
background-position: 0px -16px;
}
.button:hover {
background-position: 0px 0px;
}</script>
Raw
jsbin.munof.css
div {
}
div.button {
border: 3px silver solid;
margin:5px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAIAAABch4VNAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAAhElEQVQYV2NY/6CeYdfTfoajr+YzHH25kGHDjWaG2cdTGdq2uTOUrzIG45r1VgzN21wYuvf5Mkw6GsYw80wCw4LLmQzLbxUzBKVbMYRnOjHE5HgyxGR7MQQl2zB4xugx2IcoMlj6iYOxdaA0g12IPINTuDKDa7QGg0ecDoN3ogGDX4opAKSyKc3FQnrsAAAAAElFTkSuQmCC);
overflow: hidden;
background-position: 0px -16px;
}
.button:hover {
background-position: 0px 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment