Text appear on hover over image 7.0

Site URL: https://www.hackneyvenues.com/

I'm looking for some code so that text appears on hover over images on a SS7.0. It's for a meet the team page.

I've found a few tutorials and have tried adding the code to the page code injection header but it's not working!

The link is hackneyvenues.com/meet-the-team-1

Can anyone help?

Hi,

You mean hover on Image >>> The text will appear?

If yes, you can add Image Blocks (with image, text), then share link to page where you added, we will check & give some code to achieve effect.

@tuanphan thanks!

I put the link in the message above?

here it is again:

hackneyvenues.com/meet-the-team-1

On 5/10/2021 at 8:25 PM, nancysheridan123 said:

@tuanphan thanks!

I put the link in the message above?

here it is again:

hackneyvenues.com/meet-the-team-1

Add to Design > Custom CSS

/* Team 1 page hover */
div#page-608a9d4f0f50d93f1e70df73 .image-block figcaption {
    visibility: hidden;
    transition: all 0.3s;
}
div#page-608a9d4f0f50d93f1e70df73 .image-block:hover figcaption {
    visibility: visible;
    transition: all 0.3s;
}

@tuanphan

That's great! How can i hide the image behind as the text appears?

On 5/12/2021 at 3:43 PM, nancysheridan123 said:

@tuanphan

That's great! How can i hide the image behind as the text appears?

Hi. You mean, when hover

• Show text
• Hide people image

Is this right?

On 5/12/2021 at 9:15 AM, tuanphan said:

Add to Design > Custom CSS

/* Team 1 page hover */
div#page-608a9d4f0f50d93f1e70df73 .image-block figcaption {
    visibility: hidden;
    transition: all 0.3s;
}
div#page-608a9d4f0f50d93f1e70df73 .image-block:hover figcaption {
    visibility: visible;
    transition: all 0.3s;
}

 

Hi! I'm hoping to achieve this effect too; on my home page I have four icons/images which relate to 4 different service levels - when each image is hovered over I'd love a short description of that particular service level to pop up or replace the image until the cursor is moved away.

Is this, or even something similar possible? Thank you!

https://hibiscus-sepia-t9yj.squarespace.com/

On 5/14/2021 at 10:52 PM, abeattie542 said:

Hi! I'm hoping to achieve this effect too; on my home page I have four icons/images which relate to 4 different service levels - when each image is hovered over I'd love a short description of that particular service level to pop up or replace the image until the cursor is moved away.

Is this, or even something similar possible? Thank you!

 

https://hibiscus-sepia-t9yj.squarespace.com/

You mean these images? You can add image with caption, then let me know. We will check & give the code to achieve effect

On 5/7/2021 at 4:58 PM, nancysheridan123 said:

Site URL: https://www.hackneyvenues.com/

I'm looking for some code so that text appears on hover over images on a SS7.0. It's for a meet the team page.

I've found a few tutorials and have tried adding the code to the page code injection header but it's not working!

The link is hackneyvenues.com/meet-the-team-1

Can anyone help?

Site URL – https://www.hackneyvenues.com/

1. (Mobile-Footer) Center newsletter?

Yes @tuanphan

That's correct, you click on the image and it fades away to reveal the bio underneath

@tuanphan Would you still be able to help with this?

I would like the image to disappear on hover with the text showing...

Thanks!

1 hour ago, nancysheridan123 said:

@tuanphan Would you still be able to help with this?

I would like the image to disappear on hover with the text showing...

Thanks!

use this new code

/* Team 1 page hover */
div#page-608a9d4f0f50d93f1e70df73 .image-block figcaption {
    visibility: hidden;
    transition: all 0.3s;
}
div#page-608a9d4f0f50d93f1e70df73 .image-block:hover figcaption {
    visibility: visible;
    transition: all 0.3s;
}
div#page-608a9d4f0f50d93f1e70df73 .image-block:hover img {visibility:hidden;}