Applying CSS to several elements at the same time

Site URL: https://aardvark-parrot-grbn.squarespace.com/

Hi, on my website https://aardvark-parrot-grbn.squarespace.com/ (password is partner) one of my image blocks has a black and white hover effect. How can I apply the same effect to other image blocks across the site, using the same code? So I don't have to write the code for each image separately.

Also, how do I apply the effect to my "Projects" Slideshow gallery?

Thank you!

You would just put a comma after each one you want targeted. Not sure how you targeted it before, but if #block12345678 for example. You'd put #block12345678, #block456789 { etc. Or you could target all images. 

.summary-thumbnail.img-wrapper{ 

The above is for summary block images. The one below is for image block images. 

.sqs-block-image-figure .image-inset {

3 hours ago, izzyswebsite said:

You would just put a comma after each one you want targeted. Not sure how you targeted it before, but if #block12345678 for example. You'd put #block12345678, #block456789 { etc. Or you could target all images. 

.summary-thumbnail.img-wrapper{ 

The above is for summary block images. The one below is for image block images. 

.sqs-block-image-figure .image-inset {

Thank you!

However, none of them seem to work for my gallery slideshow images? I used the below code now for the image gallery, however, it applies to the whole block gaining colour when hovering, not the actual slide / item.

.user-items-list-carousel {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.user-items-list-carousel:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
 

On 8/17/2022 at 12:57 PM, charlineca said:

Thank you!

 

However, none of them seem to work for my gallery slideshow images? I used the below code now for the image gallery, however, it applies to the whole block gaining colour when hovering, not the actual slide / item.

 

.user-items-list-carousel {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.user-items-list-carousel:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
 

Can you check url? It doesn't work now