Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: CSS3 demos: Other: Here

CSS only Page Curl Effect

Author: Dynamic Drive

This CSS example shows how to create a fully functional page curl effect using CSS3 only. Move your mouse over the curl, and it peels back to reveal content underneath. A quick breakdown on the making of the effect: We use a :after pseudo element plus CSS3 gradients/ shadows to render the curl itself. Then, on the :hover state, we merely enlarge the curl's outer container dimensions to create the illusion of the curl peeling back.

This Page Curl effect can easily be made responsive, by modifying its dimensions before and during the :hover state using CSS media queries at the desired breaking points.

Demo (move your mouse over the page curls at the top):

The CSS:

The HTML (place this as a child of the BODY or a positioned element):

Code Info

Rate this code:

Date Posted: 11/28/2015

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive