<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #212529; color: #fff; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .gallery .gallery-item { overflow: hidden; position: relative; cursor: pointer; box-sizing: border-box; } .gallery img { width: 100%; display: block; -webkit-filter: grayscale(0); filter: grayscale(0); transition: all 100ms ease-out; } .gallery .gallery-item:hover img { transform: scale(1.03); -webkit-filter: grayscale(1); filter: grayscale(1); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .gallery .gallery-item:hover .overlay { opacity: 1; } .overlay-content { text-align: center; color: #fff; } .image-link { display: block; text-decoration: none; color: inherit; } </style> <title>DeflaxTV Video Gallery</title> </head> <body> <div class="gallery"> {% for thumbnail in thumbnails %} <div class="gallery-item"> <a href="{{ url_for('video_watch_route', file_name_no_extension=thumbnail[:-4]) }}" class="image-link" target="_blank"> <img src="{{ url_for('thumb_route', file_name=thumbnail) }}" alt="{{ thumbnail }}"> <div class="overlay"> <div class="overlay-content"> <h3>Play</h3> <p>{{ thumbnail[:-4] }}</p> </div> </div> </a> </div> {% endfor %} </div> </body> </html>