Mosaic Grid Image - 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>Mosaic Grid Image</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; margin: 0; font-family: Arial, sans-serif; } .mosaic-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 900px; padding: 20px; } .mosaic-item { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-in-out; } .mosaic-item:hover img { transform: scale(1.1); } </style> </head> <body> <div class="mosaic-container"> <div class="mosaic-item"> <img src="https://via.placeholder.com/300x400" alt="Sample Image"> </div> <div class="mosaic-item"> <img src="https://via.placeholder.com/300x400" alt="Sample Image"> </div> <div class="mosaic-item"> <img src="https://via.placeholder.com/300x400" alt="Sample Image"> </div> <div class="mosaic-item"> <img src="https://via.placeholder.com/300x400" alt="Sample Image"> </div> <div class="mosaic-item"> <img src="https://via.placeholder.com/300x400" alt="Sample Image"> </div> <div class="mosaic-item"> <img src="https://via.placeholder.com/300x400" alt="Sample Image"> </div> </div> </body> </html>