Bouncing Icon Hover Effect - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bouncing Icon Hover Effect</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .card { position: relative; width: 200px; height: 200px; background-color: #fff; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: box-shadow 0.5s; } .card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); } .card-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .emoji { font-size: 3rem; transition: transform 0.5s ease-in-out; } .icon { font-size: 2rem; transition: transform 0.5s ease-in-out, opacity 0.5s; opacity: 0; animation: bounce 1s infinite alternate; } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } } .card:hover .icon { opacity: 1; } .text { font-size: 1.2rem; margin-top: 10px; transition: color 0.5s; } .card:hover .text { color: #ff0099; } </style> </head> <body> <div class="container"> <div class="card"> <div class="card-content"> <div class="emoji">🏀</div> <div class="icon"><i class="fas fa-basketball-ball"></i></div> <div class="text">Bounce!</div> </div> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </body> </html>