Jump to content

How do I remove opacity when clicking on clickable image in list item?

Recommended Posts

Hey,

Upon clicking my click through images , a black square appears. I want to it to be completely transparent when I click it. How do I do that?

the same thing happens on any image that is clickable including “list” items or a “gallery” image that uses click through. 
 

Thank you 

Edited by ElizLdn
Link to comment
On 10/12/2021 at 1:21 PM, ElizLdn said:

Hey,

Upon clicking my click through images , a black square appears. I want to it to be completely transparent when I click it. How do I do that?

the same thing happens on any image that is clickable including “list” items or a “gallery” image that uses click through. 
 

Thank you 

No black here. It looks like you figured it out? If no, can you take a screenshot?

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
On 10/15/2021 at 4:47 AM, tuanphan said:

No black here. It looks like you figured it out? If no, can you take a screenshot?

No its still black when you click the images. This is happening site wide. I want to remove the shadow from the image buttons. I’m not sure if its a code issue or part of my template but i dont see any option to remove this in site styles 

 

Edited by ElizLdn
Link to comment

Hey @ElizLdn please add the following code. Go to the Design > Custom CSS

* {
  -webkit-tap-highlight-color: transparent !important;
}

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
On 10/18/2021 at 9:38 AM, SquareRefresh said:

Hey @ElizLdn please add the following code. Go to the Design > Custom CSS

* {
  -webkit-tap-highlight-color: transparent !important;
}

It worked !! Thank you so much

 

Actually, is it possible to make it transparent for clickable images only ? But keep the shadows on regular buttons?

Edited by ElizLdn
Link to comment
8 hours ago, ElizLdn said:

Actually, is it possible to make it transparent for clickable images only ? But keep the shadows on regular buttons?

Sure, please replace to:

* {
  -webkit-tap-highlight-color: transparent !important;
}

.sqs-block-button-element {
  -webkit-tap-highlight-color: initial !important;
}

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
4 hours ago, SquareRefresh said:

Sure, please replace to:

* {
  -webkit-tap-highlight-color: transparent !important;
}

.sqs-block-button-element {
  -webkit-tap-highlight-color: initial !important;
}

 

This code only worked partially 😞 

It doesn’t work for the main gallery, when i used this code those images go back to having a shadow. i think because they are clickable ‘list items’ and not gallery images because the code works fine on other parts of my website that uses gallery clickable images.

Is it possible to make the background for those list items transparent as well (whilst keeping all other buttons with shadow)

 

thank you 

Link to comment
27 minutes ago, ElizLdn said:

This code only worked partially 😞 

It doesn’t work for the main gallery, when i used this code those images go back to having a shadow. i think because they are clickable ‘list items’ and not gallery images because the code works fine on other parts of my website that uses gallery clickable images.

Is it possible to make the background for those list items transparent as well (whilst keeping all other buttons with shadow)

Remove all previous code and let's try this:

.user-items-list * {
  -webkit-tap-highlight-color: transparent !important;
}

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
18 minutes ago, ElizLdn said:

This one works the same as the first code whereby everything is transparent, all buttons

Maybe try to clear cache, cause works well on my devices.

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
14 hours ago, ElizLdn said:

It works but now only for clickable list items and not for the gallery clickable items.

For example, it works fine on main gallery images (which are list items) but if you the click the circle image on this page under ‘selfie’. When you click on it, its got the black square again. (It’s a gallery click-through item, not a list item).

 

The same thing happens on this page which are also gallery click-through images.

I want all the clickable images on the site to be transparent, but the regular buttons (such as the homepage button) to remain with the shadow, if that makes sense.

(This is based on the last code you gave me)

Thanks, we need to cover the all selectors. Try next code now:
 

a.list-item-content__button.sqs-block-button-element,
.gallery-grid-item.has-clickthrough,
.sqs-block-image-link {
  -webkit-tap-highlight-color: transparent !important;
}

Please let me know if You have any additional blocks with a clickthrough image.

Edited by SquareRefresh

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
1 hour ago, SquareRefresh said:

Thanks, we need to cover the all selectors. Try next code now:
 

a.list-item-content__button.sqs-block-button-element,
.gallery-grid-item.has-clickthrough,
.sqs-block-image-link {
  -webkit-tap-highlight-color: transparent !important;
}

Please let me know if You have any additional blocks with a clickthrough image.

It worked perfectly !! Thank you so much !! 😄

Btw could you delete the link to my site in your last quote?

Thanks again ! 

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.