sliding background effect

by Richard Hunter

HTML

<div class="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
  <div class="box box-4"></div>
</div>

CSS

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  border: solid 1px red;
  margin: 5px;
  transition: all .4s ease;
  background-color: lightgoldenrodyellow;
}

.box-1 {
  background-image: linear-gradient(to top, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% 0%;
  background-size: 100% 200%;
}

.box-1:hover {
  background-position: 0% 100%;
}

.box-2 {
  background-image: linear-gradient(to bottom, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% -100%;
  background-size: 100% 200%;
}

.box-2:hover {
  background-position: 0% -200%;
}

.box-3 {
  background-color: crimson;
  background-image: linear-gradient(to bottom left, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% 100%;
  background-size: 200% 200%;
  background-repeat: no-repeat;
}

.box-3:hover {
  background-position: 0% -100%;
}

.box-4 {
  background-image: linear-gradient(to top right, crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% -100%;
  background-size: 200% 200%;
  background-repeat: no-repeat;
}

.box-4:hover {
  background-position: 0% 100%;
}