Shopify themes, liquid, logos, and UX
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!
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?
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
PAGE:https://havanagroup-official.com/pages/online-store
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;
}
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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;
}
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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
page:https://havanagroup-official.com/pages/online-store
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025