Hover feature (text over image) doesn't work - text always shows

Hello,

I want to include some text that shows when hovering over an image. 

I followed all the steps as I found it online (add image block, add text block above, add background to text, add the following custom-css code: 

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

#block-yui_3_17_2_1_1700644683930_48541:hover {
opacity: 1;
transition: opacity 1s
}
}

When I'm in editing mode it seems to work: The image shows and when I hover over it the text appears. However, when I click save and then go to the actual website, the text always shows instead of the image, even when I don't hover over it. 

Anyone knows what the issue is?
 

Thank you

@Cre8tiveVision can you share a link to the page you're having trouble with so we can see the code in action?

On 11/22/2023 at 6:13 PM, SaranyaDesigns said:

@Cre8tiveVision can you share a link to the page you're having trouble with so we can see the code in action?

Sure: https://www.cre8tive.vision/leistungen

14 hours ago, tuanphan said:

Try adding !important to the code, the new code should be

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

#block-yui_3_17_2_1_1700644683930_48541:hover {
opacity: 1 !important;
transition: opacity 1s;
}
}

 

Perfect, that worked! Thank you so much 🙂