Im Having a hard time Targeting a CSS Hover effect on the IMG itself.

DavidBeuy
Tourist
17 0 1

Hey everyone. I cant seem to target these images for a hover effect. I just want to have it be a faded blue over the whole image vs how I have it now targeting the text. Any help on getting that happen would be helpful. Thanks. 

Screenshot 2024-03-12 102502.png

 As you can see on Panfish text it's blue on hover. I want that Blue faded over the whole image. 

Appreciate any help on this! Thanks

Replies 2 (2)

Sweet_Savior_3
Shopify Partner
1070 88 96

Hello @DavidBeuy 

 

Welcome to Shopify Community.

 

Can you please share your store URL.

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

PageFly-Richard
Shopify Partner
4242 960 1609

Hi @DavidBeuy 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.content-over-media{
position: relative;

    transition: all 0.25s ease;
}
.content-over-media::before {
position: absolute;
display: block;
z-index: 1;
content: '';
background-color: transparent;
width: 100%;
height: 100%;
}
.content-over-media:hover::before,
.content-over-media:hover .prose{
background-color: rgb(39 67 111 / 50%);
} 
</style>

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.