Block Reveal Effects

Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.
By in Playground on
revealereffect_800x600
View demo Download Source

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

Today we’d like to share a couple of ideas for a kind of block reveal effect that has been used in some designs recently. The main idea is to reveal content in a schematic box look. The effect first shows a decorative block element being drawn and when it starts to decrease its size, it uncovers some content underneath.

The effect is inspired by some animations used in a couple of really nice websites (and a Dribbble shot):

There are of course many more examples out there; these are just a few that we’ve discovered lately and got inspired by.

blockrevealers_01

Attention: We are using flexbox and viewport units, which might not be supported in older browsers, especially IE. For the effect itself we use 3D Transforms, so only modern browsers here.

Please note that the demos are optimized for desktop view.

revealer

Have a look at all the demos and browse the HTML files to see how the effect is implemented. All demos show some different possibilities. The last demo shows how a piece can be left uncovered to show then some content on top.

References and Credits

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version E
  • SafariSupported
  • OperaSupported
Find this project on Github

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

BeAnimations

How to Bring Your Website to Life with UI Animation

RapidLayerAnimation_featured

Rapid Image Layers Animation

DistortedLink_featured

Distorted Link Effects with SVG Filters

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 32

Comments are closed.

  1. Wonderful work!
    I was just wondering if it might be possible to use the effects on the overview + modal + menu + split layout on the same page?
    I tried putting the java scripts one after the other on the same page. That doesn’t work.
    Any help would be greatly appreciated.

    Best regards!

    Nedim

  4. Hi, it’s a great effect. Well done.

    I try to make a loop to display this animation on all titles and images in my page. Anybody here can help me, please ?

  5. Iv’e tried the script. It works perfectly in Chrome and Firefox. But buggy in IE 11 and Edge

  6. Great script, thank you! But why does the menu in the demo work in IE/Edge, but the downloadable source not? Can’t recognize any changes at the script…

  8. Hi Mary Lou,

    Love this!

    Although I’m having trouble making the block revealer form actually submit. Any chance you could provide an example code for this?