Heim > Web-Frontend > js-Tutorial > Hauptteil

Tom- und Jerry-Karten mit illusionistischem Effekt mit HTML-CSS und Javascript

Susan Sarandon
Freigeben: 2024-11-05 02:47:02
Original
1076 Leute haben es durchsucht

Tom and Jerry cards with illusionsitic effect with html css and javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elegant Hover Cards</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .card-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        .top-row {
            display: flex;
            gap: 20px;
        }
        .card {
            position: relative;
            width: 250px;
            height: 300px;

            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            transition: transform 0.5s ease;
            cursor: pointer;
        }
        .card:hover {
            transform: scale(1.05);
        }
        .card img {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            transition: transform 0.5s ease;
        }
        .card-right img{
            width: 200px;
        }
        /* Hover effects for each card */
        .card-left:hover img {
            transform: translate(-60%, -40%);
        }
        .card-right:hover img {
            transform: translate(-25%, -25%);
        }

        .card-content {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.5s ease;
        }
        .card:hover .card-content {
            opacity: 1;
            transform: translateY(0);
        }
        .card-content h2 {
            margin-bottom: 10px;
            font-size: 1.5rem;
            color: #333;
        }
        .card-content p {
            font-size: 1rem;
            color: #666;
        }
    </style>
</head>
<body>

<div class="card-container">
    <!-- Top Row Cards -->
    <div class="top-row">
        <!-- Left Card - Tom -->
        <div class="card card-left">
            <img src="./tom.png" alt="Tom Image">
            <div class="card-content">
                <h2>Tom</h2>
                <p>Tom Cat is a cartoon character from the Tom and Jerry series, a cat who is usually mute but does speak in some cartoons.</p>
            </div>
        </div>

        <!-- Right Card - Jerry -->
        <div class="card card-right">
            <img src="./jerry.png" alt="Jerry Image">
            <div class="card-content">
                <h2>Jerry</h2>
                <p> Jerry is a brown anthropomorphic house mouse who is usually silent. Jerry is the protagonist in the series, and his rival is Tom Cat.</p>
            </div>
        </div>
    </div>


</div>

</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTom- und Jerry-Karten mit illusionistischem Effekt mit HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage