Scribd Logo
Upload

Welcome to Scribd!

  • Notepad

    Uploaded by

    Moeed
    3 views2 pages
    The document describes an animation effect for cards. When the user hovers over a card, any hidden cards within it will fade in and rotate continuously. The cards are white rectangles with rounded corners on a black background. CSS is used to apply styles like opacity, rotation animation, and hover interactions. JavaScript adds event listeners to toggle class names and show/hide the hidden cards on mouse enter/leave.

    Original Description:

    Original Title

    notepad

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes an animation effect for cards. When the user hovers over a card, any hidden cards within it will fade in and rotate continuously. The cards are white rectangles with rounded corners on a black background. CSS is used to apply styles like opacity, rotation animation, and hover interactions. JavaScript adds event listeners to toggle class names and show/hide the hidden cards on mouse enter/leave.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views2 pages

    Notepad

    Uploaded by

    Moeed
    The document describes an animation effect for cards. When the user hovers over a card, any hidden cards within it will fade in and rotate continuously. The cards are white rectangles with rounded corners on a black background. CSS is used to apply styles like opacity, rotation animation, and hover interactions. JavaScript adds event listeners to toggle class names and show/hide the hidden cards on mouse enter/leave.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Card Animations</title>
    <style>
    body {
    background-color: black;
    }

    .card {
    width: 200px;
    height: 100px;
    border-radius: 15px;
    background-color: white;
    margin: 10px;
    }

    .hidden-card {
    opacity: 0;
    }

    .card:hover .hidden-card {
    opacity: 1;
    animation: tild 1s linear infinite;
    }

    @keyframes tild {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }
    </style>
    </head>
    <body>
    <div class="card">
    <h2>Card 1</h2>
    </div>
    <div class="card">
    <h2>Card 2</h2>
    </div>
    <div class="card hidden-card">
    <h2>Card 3</h2>
    </div>

    <script>
    const cards = document.querySelectorAll(".card");

    for (const card of cards) {


    card.addEventListener("mouseenter", function() {
    const hiddenCard = this.querySelector(".hidden-card");
    hiddenCard.classList.add("visible");
    });

    card.addEventListener("mouseleave", function() {
    const hiddenCard = this.querySelector(".hidden-card");
    hiddenCard.classList.remove("visible");
    });
    }
    </script>
    </body>
    </html>

    You might also like