뒷배경색을 만들기

단순히 배경색이 변화하는 것뿐만 아니라, 아래에서부터 위로 배경색이 올라와야 한다. 이런 경우에는 아예 배경색만을 전담하는 요소를 따로 만들어 주는 것이 더 구현하기 편할 것 같다. 따라서 pseudo element를 통해 배경색을 구현하도록 한다.

.hover-effect-card__card {
  position: relative;
	...
}

.hover-effect-card__card::before {
  content: "";
  position: absolute;
	bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: darkcyan;
}

::before를 사용하여 뒷배경을 만들었지만, 원래 요소의 text들이 이 친구한테 덮여져서 보이지 않는다.

z-index를 사용하여 카드의 내용이 ::before보다 위에 나타날 수 있도록 한다. 이 때, z-index는 해당 요소의 position이 static이 아닐 때만 적용이 되므로(z-index가 동작하지않는 이유 4가지), 일부러라도 position 값을 relative나 absolute로 만드는 작업이 필요하다.

.hover-effect-card__card::before {
  ...
  z-index: 1;
}

.hover-effect-card__content {
  position: relative;
  z-index: 2;
}

보기에서는 ::before 요소가 밑에서부터 4px만 올라와 있기 때문에, 다음과 같이 처리한다.

.hover-effect-card__card::before {
	...
  bottom: calc(-100% + 4px);
}

그리고 hover했을 때 content의 color가 하얀색으로 변하고, ::before의 위치가 맨 위로 올라오므로 bottom의 값을 변화시키도록 한다.

.hover-effect-card__card:hover {
  color: white;
}

.hover-effect-card__card:hover::before {
  bottom: 0;
}

이제 애니메이션을 넣어보도록 하자.

애니메이션 넣기

card의 경우에는 color를, ::before의 경우에는 bottom을 변화시켜주어야 한다.