Stop image hover on multirow on specific page

Shopify Discussion
1

Hi, how can I remove hover effect on a specific page and specific image? I have this image on my product page under multirow, whenever I hover my mouse over the image would disappear. How to remove the hover effect and make the image remain still? Help please.

Screenshot 2024-10-02 at 12.23.10 PM.png
Screenshot 2024-10-02 at 12.23.10 PM.png2638×1422 379 KB

2

Hello @Crystalwclee

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

hi, here’s the link to the page https://compoundcosmetics.com/products/relief-balm

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.image-with-text .image-with-text__media:hover img:first-child { opacity: unset !important; }

Tech_Coding_0-1727844886235.png
Tech_Coding_0-1727844886235.png1212×364 47.4 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

5

hello @Crystalwclee

Go to online store ----> themes ----> actions ----> customize ---->open product page---->select relief-balm …>
open the page and put the css to the custom

da4327a5-082a-4119-967d-18e1642bccab.png
da4327a5-082a-4119-967d-18e1642bccab.png1366×641 129 KB

css also check the sceenshot

.image-with-text .image-with-text__media:hover img:first-child {
    opacity: 1;
}

And if that doesn’t work, give me store’s collaborator access and I’ll do it for you

If this was helpful, hit the like button and accept the solution.
Thanks

6

Hi @Crystalwclee

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

Hope this can help you solve the issue

Best regards,

Richard | PageFly