효과질문 드립니다
관련링크
본문
홈페이지 보면 효과중에
마우스 오버하면 그 섹션이 늘어나는 효과가 있던데
이거는 어떻게 만드는걸까요 ?
css로 만드는건가요 아니면 제이쿼리로 만드는건가요 ?
답변 3
css 만으로 동작하는 예제 입니다.
<style>
.section2 .flip-wrap {
display: flex;
height: 275px;
}
/*
.section2 .flip-wrap .list.active {
width: 65%;
}
.section2 .flip-wrap .list.non-active {
width: 35%;
}
*/
.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);
}
.section2 .flip-wrap .list:nth-child(1) {
background-color: #ddd;
}
.section2 .flip-wrap .list:nth-child(2) {
background-color: #eee;
}
.section2 .flip-wrap .list:hover {
width: 100%;
}
</style>
<section class="section2">
<div class="flip-wrap">
<div class="list">1</div>
<div class="list">2</div>
</div>
</section>
hover 시 width:100%인데, 적용해보니 100% 안 차네요.
왜 그런지 궁금합니다.
https://codepen.io/sinbi/pen/eYrNWXM
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%;
}
으로 가능합니다.
자세한 설명 감사합니다.
덕분에 제 내공이 1갑자 쌓였습니다.
css, jquery 모두 가능합니다.
혹시 어떻게 처리해야할지 알려주실수있으신가요 ?
그 사이트에서 개발자도구(f12) 해서 확인해보세요..
마우스 오버할때.. class 를 active 와 non-active 로 서로 바꿔주고 있구요.
2가지 css 형태를 먼저 잡아주고..
마우스 오버 시 변경하면서 페이드 효과를 준겁니다.
https://devinus.tistory.com/49
답변을 작성하시기 전에 로그인 해주세요.
