클립패스 오버레이 그림자 질문이요!
227
작성한 질문수 15
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;
}답변 1
pointer-event:none;
1
76
1
실전 반응형 웹사이트 이미지 다운
1
80
2
87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)
1
66
2
목소리 좀 키워주세요.
1
135
2
PDF파일은 어디있나요?
1
183
2
실전 반응형 웹사이트
1
155
2
강의 내용 pdf가 제공되나요?
1
173
1
flex 가 부트스트랩 5 에 추가되었는데 float 를 실무에서 아직 많이 사용하나요 ?
1
219
1
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ?
1
195
1
실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ
1
393
2
scss에 active 적용하는 방법
1
320
1
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
1
1187
2
실전 넷플릭스 6 footer부분
1
269
2
.dark 적용 하는 법
1
213
1
JavaScript & jQuery - 검색창 확장하기(3)에서
1
304
2
포트폴리오 CSS Grid 반응형 레이아웃에서
1
295
1
폰트어썸 4.7 아이콘
2
479
1
넷플릭스 공식사이트 수업 header
1
237
1
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)
1
554
2
loginForm input type=email, password 위치 css 오류
2
416
1
이미지 전환 후 잔상 효과
1
1312
4
안녕하세요. jquery 슬라이더에 대해 질문 있습니다.
1
295
1
btn 을 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다
1
490
1
flex나 grid 로 구현하는것과 비교하면 어떤가요?
1
420
1