···

       
60
       
60
       
 
       
        body {{ font-family: Arial; max-width: 800px; margin: 0 auto; padding: 20px; }}

     

       
61
       
61
       
 
       
        h1 {{ text-align: center; }}

     

       
62
       
62
       
 
       
        .gallery {{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }}

     

       
63
       
63
       
-
       
        .photo {{ border: 1px solid #ddd; padding: 5px; animation: fadeIn 0.1s; flex: 0 1 200px; position: relative; }}

     

       
64
       
64
       
-
       
        .photo img {{ width: 100%; height: 100%; transition: opacity 0.3s; object-fit: cover; }}

     

       
63
       
63
       
+
       
        .photo {{ border: 1px solid #ddd; padding: 5px; flex: 0 1 200px; position: relative; display: flex; flex-direction: column }}

     

       
64
       
64
       
+
       
        .photo img {{ width: 100%; height: 100%; object-fit: cover; }}

     

       
65
       
65
       
 
       
        .photo .colored-img {{ position: absolute; top: 5px; left: 5px; opacity: 0; pointer-events: none; width: calc(100% - 10px); height: calc(100% - 10px); }}

     

       
66
       
66
       
 
       
        .photo:hover .dithered-img {{ opacity: 0; }}

     

       
67
       
67
       
 
       
        .photo:hover .colored-img {{ opacity: 1; }}

     

       
68
       
68
       
 
       
        .photo .actions {{ text-align: center; margin-top: 5px; }}

     

       
69
       
69
       
 
       
        .photo .actions a {{ margin: 0 5px; }}

     

       
70
       
70
       
-
       
        @keyframes fadeIn {{ from {{ opacity: 0; }} to {{ opacity: 1; }} }}

     

       
71
       
70
       
 
       
        @keyframes fadeOut {{ from {{ opacity: 1; }} to {{ opacity: 0; }} }}

     

       
72
       
71
       
 
       
    </style>

     

       
73
       
72
       
 
       
    <script>