···

       
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; }}

     

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

     

       
67
       
67
       
+
       
        .dithered-img: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 fadeOut {{ from {{ opacity: 1; }} to {{ opacity: 0; }} }}