Fluid Engine Hover Image to Reveal Text - NEW

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;

}

last code should be

#block-yui_3_17_2_1_1683733217068_10626 {

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

}

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

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

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

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;

}

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

Thank you - I removed the code.

Hey mdemartin, did this end up working? What code did you use for what you currently have? That's exactly what i'm looking for? 

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;

}

You have a shape block that isn't changing opacity. When I set its display to "none" your code works just fine. 

Thanks - can you please tell me what I need to change in the code (post above) - I don't seem to be able to do it.

There's no shape block on the top one so you should just remove that shape block altogether. no code required.

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.

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.

Thank you very much - that did it!

One more question for anyone who can help. Everything now looks and works correctly:
https://www.designsite.com/test-1

However, I can't find a way to create a link to go to another page - other than creating a title text link. Is there such thing as an invisible button or something so these can link? Thanks in advance.

You can set a link to the image 

Thanks - the problem is that the white tint is over the photo so the photo won't link. I don't know maybe if you need a code block over the tint that could have the link?

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 :

can you share a link? This is much easier though with a gallery or list section and may not be possible with individual images within a section.