An animated opening envelope is an elegant way to put contact us information on the site.
Today you will learn how to create an opening envelope. The container class will hold all the elements of the envelope in a particular width. To set the layout of the envelope certain classes are taken for every position. In this example, the contact class is the background colored area of the envelope, and class paper displays the content of the letter that comes up when the envelope opens.
The position of the container class is set relative to itself and the contact class is set absolute to make it relative to its parent class. Envelope class is designed to add transition on the top margin so that upon hovering the area the envelope opens up with a delay of 150 ms. Separately four triangles are designed under the class name right, left, top, bottom, and cover area of the envelope. Z index is applied to specify the stack order of the elements and works only when the elements are positioned.
The understanding of the structure and layout is important to customize it as per the intention.