Tom and Jerry cards with illusionsitic effect with html css and javascript-JS Tutorial-php.cn

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

Susan Sarandon

Release： 2024-11-05 02:47:02

Original

1077 people have browsed it

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>

Copy after login

The above is the detailed content of Tom and Jerry cards with illusionsitic effect with html css and javascript. For more information, please follow other related articles on the PHP Chinese website!