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