Gallery Block – Grid CSS

Some useful CSS code for Gallery Block (Grid, Stack, Carousel, Slideshow).

#1. Dark overlay over image on hover

#1. Dark overlay over image on hover
div.gallery-block div.slide:hover {
    img {
        filter: brightness(0.5);
    }
}

#2. Change opacity of image on hover

div.gallery-block div.slide:hover {
    img {
        opacity: 0.2 !important;
    }
}

#3. Change caption text on hover

div.gallery-block div.slide:hover {
    * {
       color: #f1f;
    }
}

#4. Round corners of images

div.gallery-block div.slide .content-fill {
    border-radius: 20px !important;
}

#5. Add an outline color around gallery items

div.gallery-block div.slide {
    .margin-wrapper {
    border:2px solid #f1f;
}}

#6. Add a solid color behind caption

div.gallery-block div.slide {
    .image-slide-title {
   background-color: #f1f;
}}

#7. Remove space between caption – image

div.image-slide-title {
    margin-top: 0px !important;
}

#8. Align left caption

div.image-slide-title {
    text-align: left !important;
}

#9. Align text over bottom left of image

div.image-slide-title {
    position: absolute;
    bottom: 10px;
    left: 10px;
    text-align: left !important;
    color: #fff;
}

#10. Move text above image

div.margin-wrapper {
    display: flex;
    flex-direction: column-reverse;
}