Минута за Kоледа Минута за Коледа * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; display: flex; justify-content: center; align-items: center; font-family: sans-serif; background-color: #acafb5; } .wrapper { height: 60px; width: 130px; background-color: #3760C9; position: absolute; /* Change from relative to absolute */ top: 60%; /* Adjust position as needed */ left: 250%; transform: translate(-50%, -50%); /* Center the wrapper */ margin-bottom: 30px; display: flex; justify-content: center; z-index: 1; /* Ensure it’s above the text */ opacity: 0; /* Initially hide the entire wrapper */ transition: opacity 0.5s; } .lid { position: absolute; top: 0; left: 15px; transform: translateX(-50%); border-right: 65px solid transparent; border-bottom: 50px solid transparent; border-left: 65px solid transparent; transform-origin: top; transition: transform 0.25s linear; } .lid.one { border-top: 50px solid #658ced; transform: rotateX(0deg); z-index: 3; transition-delay: 0.75s; } .lid.two { border-top: 50px solid #3760C9; transform: rotateX(90deg); z-index: 1; transition-delay: 0.5s; margin-left: -15px; } .envelope { position: absolute; height: 75%; width: 100%; top: 0; left: 0; border-top: 40px solid transparent; border-right: 55px solid #C4DFF0; border-bottom: 20px solid #C4DFF0; border-left: 55px solid #a4d4f2; z-index: 3; } .letter { position: absolute; width: 80%; height: 80px; background-color: white; border-radius: 10px; z-index: 2; overflow: hidden; transition: 0.5s; } .letter p { text-align: center; font-size: 15px; margin-top: 15px; color: #777; opacity: 1; z-index: 4; } .text { position: absolute; top: 50%; left: 250%; font-size: 18px; font-weight: 22px; color: #777; line-height: 17px; white-space: nowrap; /* Prevent line breaks */ transform: translate(-50%, -50%); z-index: 2; /* Ensure text is on a layer below the wrapper */ transition: opacity 0.5s; } .text:hover { opacity: 0; /* Hides the text */ transition: opacity 0.5s; } /* On hover over .text, reveal everything inside .wrapper */ .text:hover + .wrapper { opacity: 1; } .text:hover + .wrapper .lid.one { transform: rotateX(90deg); transition-delay: 0s; } .text:hover + .wrapper .lid.two { transform: rotateX(180deg); transition-delay: 0.25s; } .text:hover + .wrapper .letter { transform: translateY(-25px); }