suchen

Heim >Web-Frontend >js-Tutorial >Tom- und Jerry-Karten mit illusionistischem Effekt mit HTML-CSS und Javascript

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

Susan Sarandon
Susan SarandonOriginal
2024-11-05 02:47:021130Durchsuche

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>

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!

JavaScript css html
Stellungnahme：
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
Vorheriger Artikel：Was macht der Operator = _ in JavaScript?Nächster Artikel：Was macht der Operator = _ in JavaScript?

In Verbindung stehende Artikel

Mehr sehen