CSSスプライトデモ

by tea4two

HTML

<h1>CSSスプライト</h1>
<p>実際の画像</p>
<img src="https://i.imgur.com/Ctrri1z.png" alt="">

<h2>デモ</h2>
<div class="box"></div>

CSS

.box:before {
  display: block;
  content: url(https://i.imgur.com/Ctrri1z.png);
}
.box {
  width: 80px;
  height: 80px;
  border: 1px solid #000;
  overflow: hidden;
}
.box:hover:before{
  margin-top: -80px;
}