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

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)

Shopify Partner
1070 88 96

Hello @DavidBeuy 


Welcome to Shopify Community.


Can you please share your store URL.



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
From Less To Further !!!

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>

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 .prose{
background-color: rgb(39 67 111 / 50%);


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.