Jump to content

Fluid Engine Hover Image to Reveal Text

Go to solution Solved by tuanphan,

Recommended Posts

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 

}

Link to comment
  • Replies 5
  • Views 391
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
 

Link to comment
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;

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.