Rollover & Sprite

When I learned many stuff about CSS through Chinese videos, I heared about this sprite image. But in school, teachers never talked about it. I guess it is another thing which is not included in the kursplan, ha?

Rollover

Rollovers are images that change state on mouse over.

Sprite

When a single image is used for several different parts of an interface, it is known as a sprite. You can add the logo and other interface elements, as well as buttons to the image.

The advantage of using sprites is that the web browser only needs to request one image rather than many images, which can make the web page load faster.

e.g.

<h1>Image Sprite</h1>
<a href="#"></a>

a {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/navigation-sprites.svg) no-repeat;
  height: 60px;
  width: 60px;
}

a:hover {
  background-position: -60px 0;
}

/* PRESENTATIONAL STYLES */
body {
  align-items: center;
  background-color: #eaeaea;
  flex-flow: column;
  display: flex;
  height: 100vh;
  justify-content: center;
}