마우스 오버시에 옆으로 늘어나는 효과를 구현했는데 한쪽만 잘 나오는데 한번만 봐주실 수 있나요??

Question

Cloud Sofa

구름같은 푹신함에 부드러운 패브릭이 더해진
단 하나의 클라우드 소파

Carib Sofa

카리브 가죽만의 특별하고 부드러운 촉감을 가진
심플하면서도 고급스러운 카리브 소파

현재 제가 원하는 효과는 왼쪽, 오른쪽 영역에 마우스를 오버했을 때 영역이 늘어나면서오버되지 않은 영역은 블러처리가 되게 하면 좋겠는데 왼쪽 영역에 올려놓을땐 잘 되는데오른쪽 영역에 올려놓으면 안되더라구요 ㅜㅜ..그리고 또 왼쪽영역은 자연스럽게 마우스를 올렸다가 떼면 자연스럽게 트랜지션이 스르륵 되는데오른쪽 영역은 마우스를 올렸다가 떼면 바로 뚝 끊기는데 혹시 이걸 어떻게 해야 오른쪽 영역도 자연스럽게 스르륵 트랜지션이 될까요 ㅜㅜ??

하얀뼈 · Accepted Answer

/* 블러 처리 */ .sofa_wrap:hover>div { -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); } .sofa_wrap:hover>.cloud_sofa_area:hover { -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } .sofa_wrap:hover>.caribe_sofa_area:hover { -webkit-filter: none; -moz-filter: none; -o-filter: none; -ms-filter: none; filter: none; } /* 가운데 텍스트 */매우 쉽게 해결................

OrangeBlack · Answer

오른쪽 영역은 마우스를 올렸다가 떼면 바로 뚝 끊기는데 혹시 이걸 어떻게 해야 오른쪽 영역도 자연스럽게 스르륵 트랜지션이 될까요 ㅜㅜ?? .caribe_sofa_area:not(:hover) { width: 50%; transition: all .3s;}

하얀뼈 · Answer

뚝 끊기는건이거 추가하면 해결 끝.caribe_sofa_area { background: url('https://caminarofficial.cafe24.com/main/sofa/sofa2.png')no-repeat, rgba(0,0,0,0.3); background-blend-mode: multiply; width: 50%; height: 800px; transition: 0.3s}

마우스 오버시에 옆으로 늘어나는 효과를 구현했는데 한쪽만 잘 나오는데 한번만 봐주실 수 있나요??

3개의 답변

Q&A 목록