안녕하세요? 선생님~!!! 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;
}
- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
回答 2
0
안녕하세요? 선생님 ^-^ !!!
html 은 선생님 파일 그대로 사용했습니다!
CSS 만 수정하였습니다.
1. index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="frame">
<div class="hexagon">
<div class="shape">
<div class="caption">
<div>
<h2>Photographer</h2>
<p>
As in other arts, the definitions of amateur and professional are not entirely categorical.
</p>
</div>
</div>
<img src="images/artist-01.jpg">
</div>
</div>
<div class="hexagon">
<div class="shape">
<div class="caption">
<div>
<h2>Musician</h2>
<p>
A composer is a musician who creates musical compositions.
</p>
</div>
</div>
<img src="images/artist-02.jpg">
</div>
</div>
<div class="hexagon">
<div class="shape">
<div class="caption">
<div>
<h2>Sculptor</h2>
<p>
Sculpture is the branch of the visual arts that operates in three dimensions.
</p>
</div>
</div>
<img src="images/artist-03.jpg">
</div>
</div>
</div>
</body>
</html>
2. style.css
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/* XEION CDN */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
* {
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;
}
0
헐레벌떡 님~ 올려주신 코드로 해볼게요.
늘 재밌게 공부하시는 것 같아서 보기 좋습니다.
혹시 html이 변경된 부분이 있으면 html도 올려주시면 좋을 것 같아요~
pointer-event:none;
1
60
1
실전 반응형 웹사이트 이미지 다운
1
59
2
87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)
1
44
2
목소리 좀 키워주세요.
1
119
2
PDF파일은 어디있나요?
1
170
2
실전 반응형 웹사이트
1
151
2
강의 내용 pdf가 제공되나요?
1
167
1
flex 가 부트스트랩 5 에 추가되었는데 float 를 실무에서 아직 많이 사용하나요 ?
1
213
1
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ?
1
186
1
실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ
1
382
2
scss에 active 적용하는 방법
1
314
1
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
1
1167
2
실전 넷플릭스 6 footer부분
1
261
2
.dark 적용 하는 법
1
206
1
JavaScript & jQuery - 검색창 확장하기(3)에서
1
299
2
포트폴리오 CSS Grid 반응형 레이아웃에서
1
284
1
폰트어썸 4.7 아이콘
2
466
1
넷플릭스 공식사이트 수업 header
1
225
1
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)
1
548
2
loginForm input type=email, password 위치 css 오류
2
413
1
이미지 전환 후 잔상 효과
1
1288
4
안녕하세요. jquery 슬라이더에 대해 질문 있습니다.
1
290
1
btn 을 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다
1
482
1
flex나 grid 로 구현하는것과 비교하면 어떤가요?
1
413
1