.example-image-gallery div {
                width: calc(25% - 10px);
                margin: 5px;
                border: 5px solid;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
            }
.example-image-gallery div img { /* Images */
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.5s ease; /* The time for any transformations to happen */
            }
.example-image-gallery div span { /* Captions */
                position: absolute;
                bottom: 15px;
                left: 0;
                width: 100%;
                box-sizing: border-box;
                background: white;
                color: black;
                text-align: center;
                padding: 5px 10px;
                font-size: 20px;
                opacity: 0;
                transform: translateY(100px);
                transition: transform 0.4s ease, opacity 0.5s ease;
            }
.example-image-gallery {
                display: flex;
                flex-wrap: wrap;
            }
.example-image-gallery div:hover span { /* Captions on Hover */
                opacity: 1;
                transform: none;
            }
.example-image-gallery div:hover img { /* Images on Hover */
                transform: scale(1.35) rotate(3deg);
            }
@media screen and (max-width: 1000px) {
    .example-image-gallery div {
        width: calc(33% - 10px);
        }
    }