Fluid Engine Hover Image to Reveal Text

Hi - on the following page:

https://www.designsite.com/test-1

If you hover over the image, it turns black to reveal white text. This is nice, but I would like it to be a tint of black so the image behind it is still visible. I'm using the following code from INSIDE THE SQUARE and it works - I'm just looking for an additional line of code that will make the text shape a tint of black. Thanks in advance.

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

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

Thank you so much - that's great!

Hello tuanphan: I'm sorry - I would actually like a tint of white instead of black - I put in the your code and changed 0 (black) to 255 (white), but when I hover over the image, there is just white - not a tint of white. Thank you in advance:

#block-yui_3_17_2_1_1683315549709_9235 {
    background-color: rgba(255,255,255,255.05) !important;
}
 

On 5/9/2023 at 11:09 PM, mdemartin said:

Hello tuanphan: I'm sorry - I would actually like a tint of white instead of black - I put in the your code and changed 0 (black) to 255 (white), but when I hover over the image, there is just white - not a tint of white. Thank you in advance:

 

#block-yui_3_17_2_1_1683315549709_9235 {
    background-color: rgba(255,255,255,255.05) !important;
}
 

change between line to this

background-color: rgba(255,255,255,0.5) !important;

Thank you so much - that worked!