-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
안녕하세요? 선생님~!!! hexagon 이렇게 만들면 어떻겠습니까?
21.11.23 11:09 작성 조회수 154
1
안녕하십니까?
선생님 강의로 매우 도움받고 있는 수강생입니다.
제가 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 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
답변을 작성해보세요.
0
헐레벌떡 김경미
질문자2021.11.25
안녕하세요? 선생님 ^-^ !!!
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
코딩웍스(Coding Works)
지식공유자2021.11.23
헐레벌떡 님~ 올려주신 코드로 해볼게요.
늘 재밌게 공부하시는 것 같아서 보기 좋습니다.
혹시 html이 변경된 부분이 있으면 html도 올려주시면 좋을 것 같아요~
답변 2