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

[DavidBeuy]

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. 

 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

[Sweet_Savior_3]

Hello @DavidBeuy 

Welcome to Shopify Community.

Can you please share your store URL.

Thanks

[PageFly-Richard]

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