How can a dark overlay be displayed when I hover over the section image banner on the TOP page?

How can a dark overlay be displayed when I hover over the section image banner on the TOP page?

Havana2024
Excursionist
68 0 6

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)

スクリーンショット 2024-09-27 182029.png

 

Please help me.

Finally, an app is fine.
please tell me.

Replies 9 (9)
Havana2024
Excursionist
68 0 6

Thank you for your comment

Please check the following before it is published.

19964f-7b.myshopify.com

password: aolyia

JasmeetVT14313
Shopify Partner
292 63 76

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!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
Havana2024
Excursionist
68 0 6

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?

スクリーンショット 2024-10-21 000229.png

JasmeetVT14313
Shopify Partner
292 63 76

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!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
Havana2024
Excursionist
68 0 6

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

 

Dan-From-Ryviu
Shopify Partner
10947 2148 2286

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.

Havana2024
Excursionist
68 0 6

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?

Havana2024_0-1729436757085.png

 

 

Dan-From-Ryviu
Shopify Partner
10947 2148 2286

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.

Havana2024
Excursionist
68 0 6

 

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