Tom- und Jerry-Karten mit illusionistischem Effekt mit HTML-CSS und Javascript-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

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

Susan Sarandon

Nov 05, 2024 am 02:47 AM

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!

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