클립패스 오버레이 그림자 질문이요!

클립패스오버레이.gif

hexagon에 transition: 0.5s를 줘서

hexagon에 hover를 할때 hexagon이 움직이고 그림자가 입체감있게 줄어들었음 좋겠는데요.

그림자가 이상하게 움직입니다..ㅠㅠ

.hexagon:hover::before { bottom: -130px}

여기에 문제가 없는 것 같은 게..hexagon에 transition을 빼면 그림자 높이가 정상적으로 작동해요.

왜 이런걸까요?

코드 첨부합니다..

<index.html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="frame">
    <div class="hexagon">
      <div class="shape">
        <div class="caption">
          <h2>EAU ROSE</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p>
        </div>
        <img src="images/01img.jpg" alt="">
      </div>
    </div>
    <div class="hexagon">
      <div class="shape">
        <div class="caption">
          <h2>DOSON</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p>
        </div>
        <img src="images/02img.png" alt="">
      </div>
    </div>
    <div class="hexagon">
      <div class="shape">
        <div class="caption">
          <h2>EAU DES SENS</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, similique.</p>
        </div>
        <img src="images/03img.png" alt="">
      </div>
    </div>
  </div>
</body>
</html>

<style.css>

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');

*{
  box-sizing: border-box;
}
body{
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.frame {
  display: flex;
  gap: 40px;
}
.hexagon {
  width: 400px;
  height: 450px;
  position: relative;
  transition: 0.5s;
}
.shape {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  width: inherit;
  height: inherit;
  position: absolute;
}
.shape img {
  width: inherit;
  height: inherit;
  object-fit: cover;
}
.hexagon .caption {
  position: absolute;
  width: inherit;
  height: inherit;
  color: #fff;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  opacity: 0;
  transform: translateY(20px);
}
.hexagon .caption h2 {
  font-size: 2em;
}
.hexagon:nth-child(1) .caption{
  background: linear-gradient(to top, rgb(165, 42, 83), transparent);
}
.hexagon:nth-child(2) .caption{
  background: linear-gradient(to top, rgb(42, 118, 165), transparent);
}
.hexagon:nth-child(3) .caption{
  background: linear-gradient(to top, rgb(165, 165, 42), transparent);
}
.hexagon:hover .caption {
  opacity: 1;
  transform: translateY(0);
} 
.hexagon:hover {
  transform: translateY(-60px);
}
.hexagon::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 60px;
  background-color: black;
  background: radial-gradient(rgba(0, 0, 0, 0.44),transparent, transparent);
  bottom: -70px;
}
.hexagon:hover::before {
  opacity: 0.6;
  transform: scale(0.8);
  bottom: -130px;
}

인프런 커뮤니티 질문&답변