Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
CSS Library
CSS Layouts

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 (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.