How do I add a white 50% opaque overlay to some images on my website

Using Squarespace 7.1 Fluid Engine

Hi there, I am trying to add a white 50% opaque overlay to all images on the website I am editing. I've tried several tutorials on editing list or gallery item blocks, but nothing I do seems to have an effect on the carousel elements. What I'm aiming for is the images to look faded in their default (main) state and when they are hovered over, they become brighter (their original color, with no overlay).

So I am trying to have the images and thumbnails to look faded with 50% white by default and when you hover over an image or thumbnail their image will show in full color.

I want this effect to apply to the (Wilde, Guardians, Meraki) images on the homepage and all thumbnail images in the (Wilde, Guardians, Meraki) store pages.

I do not know which "Selector" to use in the code. I want to use CSS to accomplish this. Here's the code I have but it's not working. Thanks

.sqs-block-image:hover {
filter: grayscale(0)
}

Here's the video I was watching that sort of explains it.
https://youtu.be/u9aIzizxcUI?si=mb9DzV4hKxmY_62O
 

1 hour ago, lornem said:

Using Squarespace 7.1 Fluid Engine

Hi there, I am trying to add a white 50% opaque overlay to all images on the website I am editing. I've tried several tutorials on editing list or gallery item blocks, but nothing I do seems to have an effect on the carousel elements. What I'm aiming for is the images to look faded in their default (main) state and when they are hovered over, they become brighter (their original color, with no overlay).

So I am trying to have the images and thumbnails to look faded with 50% white by default and when you hover over an image or thumbnail their image will show in full color.

I want this effect to apply to the (Wilde, Guardians, Meraki) images on the homepage and all thumbnail images in the (Wilde, Guardians, Meraki) store pages.

I do not know which "Selector" to use in the code. I want to use CSS to accomplish this. Here's the code I have but it's not working. Thanks

.sqs-block-image:hover {
filter: grayscale(0)
}

Here's the video I was watching that sort of explains it.
https://youtu.be/u9aIzizxcUI?si=mb9DzV4hKxmY_62O

my website URL is:
www.lornemclean.com

You can try the following CSS code

.gallery-grid-image-link {
  opacity: 0.5;
}

.gallery-grid-image-link:hover {
  opacity: 1;
  transition: opacity 0.5s ease;
}

If you need to target a specific section/ID, you can add the ID to select only that ID

Hope it can help

https://forum.squarespace.com/profile/231994-beyondspace/

Hi, that worked. Thanks so much. I have a couple of more questions if you don't mind.

1) How do I add color to the overlay if I don't want to use white?

I tried this code but it didn't work

/* --- White Image Overlay --- */
.gallery-grid-image-link {
  opacity: 0.6;
}

.gallery-grid-image-link:hover {
  opacity: 1.0;
  transition: opacity 0.1s ease;
  color: #ffcc00
}


2) How do I change the image description color so it's lighter and it doesn't stand out so much?

I tried this code but it didn't work

/* --- Gallery Font Style --- */
div.gallery-caption-wrapper p.gallery-caption-content {
    font-family: 'proxima-nova' !important;
    font-color: #ff3300;
    font-size: 24px;
}

These following codes sets all styles on your site. Kindly you check the purpose with them

You can try the following code overwrite it

.gallery-grid-image-link:after {
  content:'';
  width: 100%;
  height: 100%;
  display: block;
  background-color:#ffcc00;
  position: absolute;
  opacity: 0.6;
}

.gallery-grid-image-link:hover:after {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-caption p:first-line {
  color: unset;
  font: unset;
  font-size: unset;
  font-weight: unset;
}
.gallery-caption-content {
  color:red;
}

On 3/20/2024 at 9:05 AM, lornem said:

Using Squarespace 7.1 Fluid Engine

Hi there, I am trying to add a white 50% opaque overlay to all images on the website I am editing. I've tried several tutorials on editing list or gallery item blocks, but nothing I do seems to have an effect on the carousel elements. What I'm aiming for is the images to look faded in their default (main) state and when they are hovered over, they become brighter (their original color, with no overlay).

So I am trying to have the images and thumbnails to look faded with 50% white by default and when you hover over an image or thumbnail their image will show in full color.

I want this effect to apply to the (Wilde, Guardians, Meraki) images on the homepage and all thumbnail images in the (Wilde, Guardians, Meraki) store pages.

I do not know which "Selector" to use in the code. I want to use CSS to accomplish this. Here's the code I have but it's not working. Thanks

.sqs-block-image:hover {
filter: grayscale(0)
}

Here's the video I was watching that sort of explains it.
https://youtu.be/u9aIzizxcUI?si=mb9DzV4hKxmY_62O 
 

To add a 50% white overlay to images by default and remove it on hover using Squarespace 7.1 Fluid Engine, use this concise CSS solution:

css

Copy code

/* Apply 50% white overlay by default */ .image-block img::before, .gallery-item img::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); /* 50% white overlay */ opacity: 1; transition: opacity 0.3s ease; } /* Remove overlay on hover */ .image-block:hover img::before, .gallery-item:hover img::before { opacity: 0; }

Explanation:

Selectors (image-block and gallery-item): These target image blocks and gallery items in Squarespace.

CSS Pseudo-element (::before): Creates a white overlay using rgba(255, 255, 255, 0.5) which represents white with 50% opacity.

Opacity and Transition: opacity property controls the visibility of the overlay. transition ensures smooth fade effects on hover.

Implementation:

Custom CSS: Add this code in Squarespace via Design -> Custom CSS to apply the effect to images and thumbnails as described.