내가 마우스를 가지고 갔을 때는 hover 속성을 이용하곤 한다. 그렇지만 뚝뚝 끊기는 느낌이 들기에 이 것을 부드럽게 반응하려면 transition을 이용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./test.css" />
</head>
<body>
<div class="box-bg">
<div class="box-container">
<div class="box">
<div class="overlay"></div>
<img src="./product1-1.jpg" alt="" />
</div>
<div class="box">
<img src="./product2.jpg" alt="" />
</div>
<div class="box">
<img src="./product3.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
.box-bg {
background-color: #eee;
padding: 20px;
}
.box-container {
display: flex;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
opacity: 0;
transition: all 1s;
}
.overlay:hover {
opacity: 1;
}
.box {
width: 33%;
margin-right: 15px;
position: relative;
}
.box img {
width: 100%;
display: block;
}
우선, transition을 사용하기 위해서는 4가지의 과정을 거쳐야 한다.
1. 시작부분
2. 끝부분
3. 움직이는 트리거
4. transition
위와 같은 과정을 거쳐서 transition이 움직이게 된다. 처음에 나는 저 과정은 머릿속에 있었지만 정작 이 것들을 구현하기 위해서 어떻게 처리를 해야할지 감이 잘 안 왔다. 순서는 알겠는데 말이다.
transition은 결국에 애니메이션의 일종 과정이기에 처음과 끝부분을 만들어야 한다. 처음부분이야 그렇다 치지만 끝부분은 내가 hover의 결과물인 기본 부분에서 끝부분을 만든다는 것이 이해가 잘 안 갔다. 그래서, 어떻게 만드는건데?
아직 나는 이 과정을 거쳐가면서도 많은 부분이 헷갈리지만 좀 더 연습을 거쳐 익숙해지는 과정이 필요할 듯 싶어보인다.
오늘도 한 발자국 더 나아가.