답변 3개
채택된 답변
+20 포인트
3년 전
css 만으로 동작하는 예제 입니다.
</p>
<p><style>
.section2 .flip-wrap {
display: flex;
height: 275px;
}
/*
.section2 .flip-wrap .list.active {
width: 65%;
}
.section2 .flip-wrap .list.non-active {
width: 35%;
}
*/</p>
<p>.section2 .flip-wrap .list {
position: relative;
width: 50%;
/* background: url(../image/bg-business-duty-free.jpg) no-repeat center center; */
background-size: cover;
transition: all .8s cubic-bezier(.215, .610, .355, 1);
}</p>
<p>.section2 .flip-wrap .list:nth-child(1) {
background-color: #ddd;
}
.section2 .flip-wrap .list:nth-child(2) {
background-color: #eee;
}</p>
<p>.section2 .flip-wrap .list:hover {
width: 100%;
}
</style></p>
<p><section class="section2">
<div class="flip-wrap">
<div class="list">1</div>
<div class="list">2</div>
</div>
</section></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
s
sinbi
3년 전
�
배르만
3년 전
display: flex 속성이 지정된 상태에서 나머지 엘리먼트는 지정을 하지 않아 그렇습니다.
.section2 .flip-wrap .list:hover {
width: 100%;
}
.section2 .flip-wrap:hover .list:not(:hover) {
width: 0%;
}
혹은
.section2 .flip-wrap .list:hover {
width: 65%;
}
.section2 .flip-wrap:hover .list:not(:hover) {
width: 35%;
}
으로 가능합니다.
.section2 .flip-wrap .list:hover {
width: 100%;
}
.section2 .flip-wrap:hover .list:not(:hover) {
width: 0%;
}
혹은
.section2 .flip-wrap .list:hover {
width: 65%;
}
.section2 .flip-wrap:hover .list:not(:hover) {
width: 35%;
}
으로 가능합니다.
s
sinbi
3년 전
자세한 설명 감사합니다.
덕분에 제 내공이 1갑자 쌓였습니다.
덕분에 제 내공이 1갑자 쌓였습니다.
댓글을 작성하려면 로그인이 필요합니다.
3년 전
그 사이트에서 개발자도구(f12) 해서 확인해보세요..
마우스 오버할때.. class 를 active 와 non-active 로 서로 바꿔주고 있구요.
2가지 css 형태를 먼저 잡아주고..
마우스 오버 시 변경하면서 페이드 효과를 준겁니다.
https://devinus.tistory.com/49
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
왜 그런지 궁금합니다.
https://codepen.io/sinbi/pen/eYrNWXM