Reveal text on hover (image)

Hey guys,

I've recently added below code to spareroomwellness.com website homepage (How can I support you section), however when you view it, it straight away jumps into the text (there's no hover over options to show an image first). Any idea why?

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

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

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

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

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

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

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

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

Hi. What should it look like?

Hi @tuanphan

I would like to have images with titles displayed first and only on hover the full description to appear. See both screenshots.

Your styles are not working because SS has applied !imprtant override on opacity in their theme:
 

.fadeIn:not([data-override-initial-global-animation]) {
opacity: 1 !important;
}

So I think you are better off targeting the parent element and apply opacity there:

use .fe-block-bff684b9c89c06c3bb96 as your selector and it should work

@Vicks amazing, that worked! Thank you so much 😄