Need help with gallery overlay or opacity

Site URL: http://harp-nonagon-xem5.squarespace.com

Hey I've been trying to figure out a custom code for my gallery but haven't had any success. I want to add an overlay to the left and right images in my gallery so that the middle image stands out. I don't know if this can be achieved by setting padding parameters for the overlay or opacity so the overlay/opacity doesn't cover the middle image, or if there's a way to just overlay the left and right images so that when you scroll through the gallery the middle image is still overlay free. GoDaddy has this option available and I want to carry it over to my Squarespace account. The first image is what I have currently and the second image is what I would like it to look like.

21 hours ago, 3xfactor7 said:

Site URL: http://harp-nonagon-xem5.squarespace.com

Hey I've been trying to figure out a custom code for my gallery but haven't had any success. I want to add an overlay to the left and right images in my gallery so that the middle image stands out. I don't know if this can be achieved by setting padding parameters for the overlay or opacity so the overlay/opacity doesn't cover the middle image, or if there's a way to just overlay the left and right images so that when you scroll through the gallery the middle image is still overlay free. GoDaddy has this option available and I want to carry it over to my Squarespace account. The first image is what I have currently and the second image is what I would like it to look like.

 

Your site is private now, please set it a protected password

5 hours ago, bangank36 said:

Your site is private now, please set it a protected password

Thanks I have changed it.  The password is found1

@3xfactor7 Add to Design > Custom CSS

figure.gallery-reel-item[data-active="true"]:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    positioN: absolute;
}
figure.gallery-reel-item[data-active="true"]:after {
    opacity:0;
}

13 hours ago, tuanphan said:

@3xfactor7 Add to Design > Custom CSS

figure.gallery-reel-item[data-active="true"]:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    positioN: absolute;
}
figure.gallery-reel-item[data-active="true"]:after {
    opacity:0;
}

 

Thank you for the help. I entered the code into the custom css but it placed the opacity on the middle image instead of the outer two images. Or in other words I would like the gallery to have an opacity except for the middle image.

On 10/11/2021 at 9:56 AM, 3xfactor7 said:

Thank you for the help. I entered the code into the custom css but it placed the opacity on the middle image instead of the outer two images. Or in other words I would like the gallery to have an opacity except for the middle image.

Use this code

figure.gallery-reel-item:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    positioN: absolute;
}
figure.gallery-reel-item[data-active="true"]:after {
    opacity:0;
}

19 hours ago, tuanphan said:

Use this code

figure.gallery-reel-item:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    positioN: absolute;
}
figure.gallery-reel-item[data-active="true"]:after {
    opacity:0;
}

 

Thank you. I entered it and it worked. I have one more question. How do I blur the outer images of the gallery also without losing the white spacing between the images?

On 10/14/2021 at 10:27 AM, 3xfactor7 said:

Thank you. I entered it and it worked. I have one more question. How do I blur the outer images of the gallery also without losing the white spacing between the images?

You can contact SS Customer Care to extend it (free)

9 hours ago, tuanphan said:

You can contact SS Customer Care to extend it (free)

Website Expired

This account has expired. If you are the site owner, click below to login.

Thanks I subscribed to a plan.

On 10/15/2021 at 9:20 PM, 3xfactor7 said:

Thanks I subscribed to a plan.

Try this new code

figure.gallery-reel-item {
    margin-left: 0
}
figure.gallery-reel-item:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 5px;
    right: 5px;
    width: calc(100% - 5px);
    height: 100%;
    positioN: absolute;
}
figure.gallery-reel-item[data-active="true"]:after {
    opacity:0;
}