index.css

*, *::before, *::after {                                                                                 /* Default values: */
    box-sizing: border-box;                                                                                  /* Includes padding and border in elements for total width and height */
    margin: 0;                                                                                               /* set default margin to 0 */
    padding: 0;                                                                                              /* set default padding to 0 */
    font-family: 'Poppins', sans-serif;                                                                      /* font used (with metalink in HTML) */    
    color: white;                                                            
}

body {
    background: linear-gradient(to right, rgb(177, 178, 189), rgb(165, 168, 149));
}

.title {                                                                                               /* For the title*/
    height: 20vh;
    display: flex;
    justify-content: center;
    align-content: center;
}

.gallery {                                                                                               /* For the image gallery itself (includes two examples)*/
    display: flex;                                                                                      /* set a display of flex so that we line them up side by side*/
    justify-content: space-around;                                                                       /* use justify-content to set horizontal alignment */                                                                                    /* set the height to 100% of the view port*/
    align-items: center;                                                                                 /* set the vertical positioning in the center */                                                                          
    min-height: 100vh;                                                                                   /* but make sure to set the minimum height of the view port so that the gallery can be centered. */
}

.gallery-container {                                                                                 /* For the container that holds the images in your gallery */
    position: relative;
    height: 400px;                                                                                         /* set the height of the container that the images we put in will adhere to*/
    width: 600px;                                                                                          /* set the width of the container that the images we put in will adhere to */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);                      /* optional border */
}

.gallery-container img {                                                                              /* For the images inside the gallery container...*/
    width: 100%;                                                                                           /* the width of the image will be 100% of the width of the gallery container, which is set in gallery container*/
    height: 100%;                                                                                          /* the same for height... so we are essentially saying "make these images the size of the gallery container"*/
}

/* First image (golden gate bridge) */
.crossfade-img {                                                                                      /* For the image we want to crossfade into.. */
    position: absolute;                                                                                /* set the position of the img to absolute so it is outside the normal flow (but within the gallery-container)*/
    top: 0;                                                                                            /* and when you set top: 0, you will get a perfect overlay.*/
    left: 0;                                                                                            /* and left: 0 makes sure it is zeroed out perfectly above the image. */
    opacity: 0;                                                                                        /* to get the corssfade, you first have to set the top image opactiy to 0 so that we can intorduce a fade in*/
    transition: opacity 0.5s ease;
}

.crossfade-img:hover {                                                                                /* when the user hovers on the crossfade image...*/
    opacity: 1; 
    cursor: pointer;                                                                                         /*... set the opacity to 1 will show the image! */
}


/* Second Image (city) */
.fade::after {                                                                                          /* for the fade class, we use the ::after pseudo element which essentially adds additional content to the existing div*/        
    content: 'Check out these buildings!';                                                           /* for content, which is only used with pseudo elements after and before, we have text that will show on hover*/
    color: white;                                                                                     /* text color */
    display: flex;                                                                                      /* display property for text */
    justify-content: center;                                                                             /* center text horizontally */
    align-items: center;                                                                                 /* center text vertically*/
    font-size: 1.4em;                                                                                     /* font size */
    background: black;                                                                                /* set the background to a desired color*/
    width: 100%;                                                                                         /* the background color will be 100% width of the set image size within the container*/
    height: 100%;                                                                                       /* the background color will be 100% height of the set image size within the container*/
    position: absolute;                                                                               /* set the position to absolute so it is outside noraml flow, and bc of the realitve position of the gallery itself, we can place black box on top with top and left*/
    top: 0;                                                                                             /* position the black background top */
    left: 0;                                                                                             /* position the black background left*/
    opacity: 0;                                                                                          /* top image has an opactiy of 0 (to be revealed on hover)*/
    transition: opacity 0.3s ease;                                                                       /* transition effect for the text area on hover*/
}

.fade:hover::after {                                                                                    /* When the user hovers over the .fade::after div*/
    opacity: 0.7;                                                                                          /* on hover, the opacity will transition to a darker color (see .fade::after > transition)*/
    cursor: pointer;
}