Hi,
There is an image banner on the top page, but it is difficult to see the link to the destination.
Is there a way to display a gray overlay when you point the cursor at something?
The image is below. Gray out (= overlay)
Please help me.
Finally, an app is fine.
please tell me.
Thank you for your comment
Please check the following before it is published.
password: aolyia
Hi @Havana2024
Try adding below code to end of theme.css
.slideshow__slide>a::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
display: none;
z-index: 1;
}
.slideshow__slide>a:hover::before{
display:block;
}
For further assistance feel free to reach out.
If you find this information useful, a Like would be greatly appreciated.
And If this resolves your issue, kindly hit Like and mark it as the Solution! Thank you!
Please add this code to Online Store > Themes > Customize > Theme settings > Custom CSS
.image__hero__scale:hover picture:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #00000087;
display: block;
width: 100%;
position: absolute;
}
Thank you very much.
Solved.
It was very helpful.
Also, I’m sorry.
I would like to apply the same hover to the grid image at the bottom of the slideshow, so could you please let me know?
Thank you very much.
Solved.
It was very helpful.
Also, I’m sorry.
I would like to apply the same hover to the grid image at the bottom of the slideshow, so could you please let me know?
Please add this more code
.column__inner figure:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #00000087;
display: block;
width: 100%;
position: absolute;
}
Hi @Havana2024
Try adding this code
.column__image>a::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
display: none;
z-index: 1;
}
.column__image>a:hover::before{
display:block;
}
For further assistance feel free to reach out.
If you find this information useful, a Like would be greatly appreciated.
And If this resolves your issue, kindly hit Like and mark it as the Solution! Thank you!
Thankyou！
How to set the same overlay with cursor activity for image link banners on other pages?
↓The page you want to add.
I want to apply it to all places where links are attached to images.
page:https://havanagroup-official.com/pages/unisex-salon-list
Thankyou！
How to set the same overlay with cursor activity for image link banners on other pages?
↓The page you want to add.
I want to apply it to all places where links are attached to images.
page:https://havanagroup-official.com/pages/unisex-salon-list