답변 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%;
}
으로 가능합니다.
댓글을 작성하려면 로그인이 필요합니다.
eyekiss3년 전
그 사이트에서 개발자도구(f12) 해서 확인해보세요..
마우스 오버할때.. class 를 active 와 non-active 로 서로 바꿔주고 있구요.
2가지 css 형태를 먼저 잡아주고..
마우스 오버 시 변경하면서 페이드 효과를 준겁니다.
https://devinus.tistory.com/49
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택
왜 그런지 궁금합니다.
https://codepen.io/sinbi/pen/eYrNWXM