안녕하세요? 선생님 다음과 같은 방법으로 hexagon 만들면 더 좋지않을까요?

안녕하십니까?

선생님 강의로 매우 도움받고 있는 수강생입니다.

제가 hexagon 을 만들어보니

다음과 같이 수정하면 더 멋진 호버이펙트가 나올것같아

글 올립니다.

hexagon 호버 이펙트 될 때

bottom  부분에 마우스 갖다놓으면 떨림현상이 매우

심하게 있습니다. 

사이트 이용자들은 '이게 뭔가?  생각할것같아서 떨지않게

하고싶었습니다. 

이에

다음과 같이 .shape 에  translateY로 이동시키고

.hexagon:hover:before  도 .hexagon:before

가 이동한 만큼만 좌표를 주면 퍼블리셔도 작업 시

더욱 편할 것이라 생각됩니다.

감사합니다. 

.hexagon:hover .shape{

transform: translateY(-60px);

}

 

.hexagon:before {

  content: '';

  position: absolute;

  width: 100%;

  height: 60px;

  background: radial-gradient(rgba(0, 0, 0, 0.3), transparent, transparent);

  bottom: -70px;

  transition: 0.5s;

}

.hexagon:hover:before {

  opacity: 0.6;

  transform: scale(0.8);

  bottom: -70px;

}

/* CSS 파일 전체  */

 

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');

* {

box-sizing: border-box;

}

 

body {

  font-family: 'Noto Sans KR', sans-serif;

font-weight: 300;

color:#333;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

a {

text-decoration: none;

color: #333;

}

h1,h2,h3,h4,h5 {

font-weight: 500;

margin-top: 0;

}

.frame {

display: flex;

gap:40px;

}

.hexagon {

width: 400px;

height: 450px;

position: relative;

}

.shape {

border: 3px solid orange;

clip-path: polygon(49% 0, 100% 24%, 100% 74%, 48% 100%, 0 73%, 0 23%);

width: inherit;

height: inherit;

position: absolute;

transition: 0.3s;

overflow: hidden;

}

 

.shape img {

width: inherit;

height: inherit;

object-fit: cover;

object-position: right;

}

 

.hexagon .caption {

position: absolute;

width: inherit;

height: inherit;

color: #fff;

display: flex;

justify-content: center;

  align-items: center;

  text-align: center;

transform: translateY(20px);

transition: 0.3s;

opacity: 0;

}

.hexagon:hover .caption {

transform: translateY(0);

opacity: 1;

}

.caption h2 {

font-size: 2em;

}

.hexagon:nth-child(1) .caption {

background: linear-gradient(to top, crimson, transparent);

}

.hexagon:nth-child(2) .caption {

background: linear-gradient(to top, royalblue, transparent);

}

.hexagon:nth-child(3) .caption {

background: linear-gradient(to top, yellowgreen, transparent);

}

.hexagon:hover .shape{

transform: translateY(-60px);

}

 

.hexagon:before {

  content: '';

  position: absolute;

  width: 100%;

  height: 60px;

  background: radial-gradient(rgba(0, 0, 0, 0.3), transparent, transparent);

  bottom: -70px;

  transition: 0.5s;

}

.hexagon:hover:before {

  opacity: 0.6;

  transform: scale(0.8);

  bottom: -70px;

}