DP
Daria P

Interactive Envelope Card with Animation

First, create a closed envelope. The envelope will be white with a gradient background ranging from light grey to very pale pink. It will have gold edges. A few hearts will escape from the envelope when it is opened. When the user clicks on it, it should open, revealing a landscape-format card showing the cover. The cover will be an image file. The width of the image must not exceed 1400 pixels. When the user clicks a second time, the card opens upwards to reveal the inside, which will be divided into two editable image files (URL). The animation must be smooth. Add a ‘Reset’ button to be able to replay the animation. The whole thing must be done in HTML/CSS/JavaScript (no jQuery or heavy frameworks).

Prompt
Component Preview

About

Discover an engaging interactive envelope card with smooth animations. Click to reveal a beautiful card with editable images, all crafted using HTML, CSS, and JavaScript.

Share

Last updated 1 month ago