Jump to content

Fluid Engine Hover Image to Reveal Text - NEW

Recommended Posts

On the page above - if you roll over the image, you'll see a white box and text appear. I would actually like to have the box be a tint of white so the image can still be seen. I am using the following code and I believe at the end it has a transparency number but it doesn't seem to work. Any help would be much appreciated. Below is the link and the code we are using:
https://www.designsite.com/test-1

@media only screen and (min-width: 640px){ 

#block-yui_3_17_2_1_1683733217068_10626 { 

opacity: 0; 

transition: opacity .5s 

} 

 

#block-yui_3_17_2_1_1683733217068_10626:hover { 

opacity: 20; 

transition: opacity .5s 

} 

}

 

#block-yui_3_17_2_1_1683733217068_10626 {

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

}

Link to comment
  • Replies 20
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Hello tuanphan - I'm sorry - one more question. If I want to apply this effect to different blocks, there should be  a way to add additional image block IDs instead of duplicating the code each time. If so, can you tell me how to add a second block ID code with what I have following. Thank you again for your help!

 

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

#block-yui_3_17_2_1_1683733217068_10626:hover { 
opacity: 20; 
transition: opacity .5s 

}

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

Link to comment

You can separate block id with comma, something like this

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

#block-yui_3_17_2_1_1683733217068_10626:hover, block-id2:hover, block-id3:hover { 
opacity: 20; 
transition: opacity .5s 
} 
}

#block-yui_3_17_2_1_1683733217068_10626, block-id2, block-id3 {
background-color: rgba(255,255,255,0.675) !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

Hi @tuanphan,

I don't know if it is the right place to talk about that or who I should address to get help.

But I tried using the following code to have the effect on hover, and for some reason it is not working on the website. The weirdest part is that it works perfectly when I enter the editing mode. 

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

I repeated the code 6 times because when I just added a coma, it would only do the effect on the last picture/block of the code. (again working only in the editing mode)

 

Could you give indicate a way to solve this or help me out somehow? Thanks a lot

https://www.unshaded.eu/missions
pass: Unshaded22

Link to comment

Hello tuanphan - that still doesn't work. If you go to the following page, the top image works as it should: when you hover over it, a white tint comes up with title. The image below it is 100% white - when you hover over it, the title appears but the image is never seen and the white is not a tint. I put in the second ID block as you say, but it still doesn't work.

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

 

 

@media only screen and (min-width: 640px){ 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 { 

opacity: 0; 

transition: opacity .5s 

} 

 

#block-yui_3_17_2_1_1683733217068_10626:hover, #block-yui_3_17_2_1_1685104993166_5849:hover { 

opacity: 20; 

transition: opacity .5s 

} 

}

 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 {

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

}

 

Link to comment
On 5/29/2023 at 4:02 AM, unshaded_productions said:

Hi @tuanphan,

I don't know if it is the right place to talk about that or who I should address to get help.

But I tried using the following code to have the effect on hover, and for some reason it is not working on the website. The weirdest part is that it works perfectly when I enter the editing mode. 

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

I repeated the code 6 times because when I just added a coma, it would only do the effect on the last picture/block of the code. (again working only in the editing mode)

 

Could you give indicate a way to solve this or help me out somehow? Thanks a lot

https://www.unshaded.eu/missions
pass: Unshaded22

You mean this section?

On 5/30/2023 at 9:56 PM, mdemartin said:

Hello tuanphan - that still doesn't work. If you go to the following page, the top image works as it should: when you hover over it, a white tint comes up with title. The image below it is 100% white - when you hover over it, the title appears but the image is never seen and the white is not a tint. I put in the second ID block as you say, but it still doesn't work.

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

 

 

@media only screen and (min-width: 640px){ 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 { 

opacity: 0; 

transition: opacity .5s 

} 

 

#block-yui_3_17_2_1_1683733217068_10626:hover, #block-yui_3_17_2_1_1685104993166_5849:hover { 

opacity: 20; 

transition: opacity .5s 

} 

}

 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 {

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

}

 

Can you remove the code? I can check easier

I tried removing your code but the image doesn't appear

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

Following is the code that should work but does not. Again, top top image works as it should but the image below it does not appear at all - just the title when you hover over it. Thank you in advance.
https://www.designsite.com/test-1

 

 

@media only screen and (min-width: 640px){ 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 { 

opacity: 0; 

transition: opacity .5s 

} 

 

#block-yui_3_17_2_1_1683733217068_10626:hover, #block-yui_3_17_2_1_1685104993166_5849:hover { 

opacity: 20; 

transition: opacity .5s 

} 

}

 

#block-yui_3_17_2_1_1683733217068_10626, #block-yui_3_17_2_1_1685104993166_5849 {

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

}

Link to comment

Hi jaeveedee - I'm really sorry - I'm not sure what you man. The top image is exactly what I want - when you hover over it, the white tint appears with title. The bottom should - but doesn't work like that. There is a shape block on the top one which has the white tint. Thank you again.

Link to comment

according to the code that's on the page you have an html block and an image block for the top one and an html block, image block, and shape block for the bottom one. Your code is transitioning the opacity of the html block and does nothing to the shape block in either one, unless im missing something here? Check screenshots.

Screenshot 2023-06-13 at 1.09.50 PM.png

Screenshot 2023-06-13 at 1.08.39 PM.png

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment
  • 1 month later...

I am looking for an adjustment to the CSS code to hover and reveal, Can anyone help.

I want to hover over one block and a different block in a different location should reveal:

 

FOR EXAMPLE 

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

#BlockID1:hover { 
opacity: 1;
transition: opacity 1s
}
}

I want to change it so that when we make BlockID1 opacity0, On hover on BlockID2, BlockID1 Opacity = 1

Please help :

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.