Dynamic Growth - 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>Dynamic Growth</title> <style> body { margin: 0; font-family: 'Arial', sans-serif; background-color: #fffaf0; display: flex; justify-content: center; align-items: center; height: 100vh; } .text-background-container { position: relative; width: 85%; max-width: 750px; height: 320px; margin: 20px auto; overflow: hidden; border-radius: 25px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); transition: transform 0.5s ease; } .text-background-container:hover { transform: scale(1.06); } .text-background-container img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.5) brightness(0.8); transition: filter 0.5s ease; } .text-background-container:hover img { filter: sepia(0) brightness(1); } .text-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #333; text-align: center; font-size: 2em; font-weight: 700; text-transform: uppercase; line-height: 1.4; text-shadow: 0 3px 8px rgba(255, 255, 255, 0.7); z-index: 2; animation: bounceIn 1.2s ease-in-out; } @keyframes bounceIn { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.8); } 70% { transform: translate(-50%, -55%) scale(1.1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } </style> </head> <body> <div class="text-background-container"> <img src="https://via.placeholder.com/750x320.png?text=Dynamic+Growth" alt="Dynamic Growth"> <div class="text-content"> Dynamic Growth </div> </div> </body> </html>