My text ob hover code is only working when I enter edit mode.

So I am using a few lines of custom CSS from a pretty reliable online source. It'a reveal text on hover code, but it doesn't appear to work in the display page when I enter the code. I save the custom CSS, then enter edit mode on the site and it works. But when I launched the site, it doesn't work. Just like in the display page, the text appears over the image all the time. The link still works, but that's it.

Here is the code I am using:

@media only screen and (min-width: 640px){ 
#block-yui_3_17_2_1_1678207568530_332105
  { 
opacity: 0; 
transition: opacity .5s 
} 

#block-yui_3_17_2_1_1678207568530_332105:hover { 
opacity: 1; 
transition: opacity .5s 
} 
}

below are two screen shots. The one on the left is in the preview, you can see the text is visible constantly. The one on the right shows the effect appearing when I am editing the site.

I have tried it on several different sites, but no luck. Anyone have any ideas?

The text in the reveal has a link. Could that be the problem?

thanks

I meant to say "on" hover.

Hi,

Can you share link to page in screenshot? We can check code easier

I'm having the same issue where the hover effect only works in edit mode and not once I save the site. Have you found a fix?

On 4/3/2023 at 10:49 PM, TaylorMesser said:

I'm having the same issue where the hover effect only works in edit mode and not once I save the site. Have you found a fix?

If you share link to your site, we can help easier

Hi,

I have the same issue. The text on hover code only works in edit mode. Tried different things, but nothing works.

Appreciate help, thanks!

On 8/28/2023 at 7:04 PM, Karin12345 said:

Hi,

I have the same issue. The text on hover code only works in edit mode. Tried different things, but nothing works.

Appreciate help, thanks!

If you share link to page where you have problem, we can help easier

On 8/28/2023 at 7:04 PM, Karin12345 said:

Hi,

I have the same issue. The text on hover code only works in edit mode. Tried different things, but nothing works.

Appreciate help, thanks!

Use this code. Some SS core code overrides your code so need to use !important

@media only screen and (min-width: 640px) {
    #block-yui_3_17_2_1_1692880694238_13789 {
        opacity:0 !important;
        transition: opacity 1s;
    }
    #block-yui_3_17_2_1_1692880694238_13789:hover {
        opacity: 1 !important;
        transition: opacity 1s;
    }
}

On 9/3/2023 at 11:02 AM, tuanphan said:

Use this code. Some SS core code overrides your code so need to use !important

@media only screen and (min-width: 640px) {
    #block-yui_3_17_2_1_1692880694238_13789 {
        opacity:0 !important;
        transition: opacity 1s;
    }
    #block-yui_3_17_2_1_1692880694238_13789:hover {
        opacity: 1 !important;
        transition: opacity 1s;
    }
}

 

Thank you so much! It worked 🙂