# (Squarespace) Hover a Gallery image \> Show an image overlay

**URL:** <https://community.elfsight.com/t/squarespace-hover-a-gallery-image-show-an-image-overlay/48559>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [April 20, 2024, 8:08am UTC](https://community.elfsight.com/t/squarespace-hover-a-gallery-image-show-an-image-overlay/48559 "2024-04-20T08:08:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [April 20, 2024, 8:08am UTC](https://community.elfsight.com/t/squarespace-hover-a-gallery-image-show-an-image-overlay/48559/1 "2024-04-20T08:08:15Z")

</div>

If you want to make a background image overlay appears when hover images on Gallery Section (all images will use same overlay), you can use this code to Website \> Website Tools \> Custom CSS.

```auto
figure[class*="gallery-"] a:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2018/06/22/08/24/emotions-3490223_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important
}
figure[class*="gallery-"]:hover a:after {
    opacity: 0.5;
}

```

Replace Pixabay with your overlay image url.