Revealing Hidden Elements By CSS Animations

Use-Cases of this Tutorial

You are looking for CSS animations to reveal hidden elements like images etc. Useful for showing coupon codes etc.

You are looking to show and hide elements through CSS animations

Example 1

Add a pseudo-element to the element which is to be revealed. On a click event, rotate the pseudo-element so that the inner element gets revealed.

The effect can be achieved by using a pseudo-element for the element which is to be hidden. There are a few points to note :

The element which is to be revealed must have a parent element. The overflow property of the parent must be set to hidden

The element must have position property as relative

The pseudo-element must have position property as absolute. This is because we want the pseudo-element to be 150% of the size (both height and width) of the hidden element. 150% is just an example — the main thing is that it should be greater than the hidden element, so that the pseudo-element completely sweeps by it.