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

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 

Hey @ElizLdn share me Your site link please.

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?

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 

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

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

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?

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;
}

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 

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;
}

3 hours ago, SquareRefresh said:

Remove all previous code and let's try this:

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

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

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.

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.

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 ! 

@ElizLdn You're welcome.