본문 바로가기

광고

Design

Reference

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

CSS

NEWS

SITE

Coding


광고

Code View/Hover Effect

[Hover] 마우스 오버하면 펼쳐지는 메모지 CSS3 만들기






이 소스의 핵심은

#Awesome:hover h4{
opacity: 0;
transition: opacity 50ms linear 300ms;
}

#Awesome:hover .front .circle{
margin-top: -90px;
background-color: #e2d439;
background-position: 0 100px;
}

마우스 오버시 transition을 어떻게 주는가에 있겠죠^^
생각보다 어렵지 않아서 소스보시면 도움이 될거예요~



See the Pen Pure CSS Peeling Sticky by patrickkunka (@patrickkunka) on CodePen.