Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Applying CSS to several elements at the same time


charlineca

Question

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!

Link to comment
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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 {

Link to comment
  • 0
Posted (edited)
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);
}
 

Edited by charlineca
Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...