<!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!