title text when I hover mouse over an image?

Hi,
I am trying and failing badly at doing something incredibly simple.

I have image blocks on the website I am creating.

I want them to display some (simple) title/caption text when the mouse hovers over them.

The sort of thing that happens here: https://techstacker.com/display-text-on-hover-with-html/

when you hover over the rubix cube, it says "The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik"

For whatever reason I have been struggling for hours to figure out how to do this in squarespace. I would be very grateful for any assistance.

Hi,

You can add Poster Block with text, then share url to page where you added it, we can give some simple code to achieve this.

Thank you very much.
I have page url here: https://copper-cardioid-3n96.squarespace.com/teaching

I have an image block. There is no option I can find for poster block, inline block etc.
I would be grateful for your help.

3 hours ago, MarcusEl said:

Thank you very much.
I have page url here: https://copper-cardioid-3n96.squarespace.com/teaching

I have an image block. There is no option I can find for poster block, inline block etc.
I would be grateful for your help.

The site is private. Can you setup an access password?

Thank you, the site can be accessed with password testg891

15 hours ago, MarcusEl said:

Thank you, the site can be accessed with password testg891

Hi. See this image to set Image to Poster

Hi,
I know I am missing something obvious, but that's not what I see. There's no poster option?
 

Okay. I checked. New editor, Poster block has been removed

You can use Gallery Section - Grid.

Add a Gallery Section > Add some images (2 or 3), add caption, then enable Gallery Caption. Then share link to page where you added Gallery, we will give the code

Thank you so much for your help!!

This link should work
https://copper-cardioid-3n96.squarespace.com/new-page-1

testg891

https://copper-cardioid-3n96.squarespace.com/new-page-1

Add to Design > Custom CSS

body#collection-62cdc9855f23e904323c45bd {
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}}

IT works! You are my hero! Thank you for the help!

HOWEVER,

I am struggling to replicate this for the galleries on this page: 

https://copper-cardioid-3n96.squarespace.com/research-1

Would you be able to help me replicate this for the galleries on this page. I.e. the same hover effect for these galleries?

Thank you so very much for your help.

7 hours ago, MarcusEl said:

HOWEVER,

I am struggling to replicate this for the galleries on this page: 

https://copper-cardioid-3n96.squarespace.com/research-1

 

Would you be able to help me replicate this for the galleries on this page. I.e. the same hover effect for these galleries?

Thank you so very much for your help.

Do you use Personal or Business or Commerce Plan?

If Business Plan or higher, add this to Research-1 page Header

<style>
  figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

If Personal Plan, edit Page > Add A Code Block (anywhere) > Paste this code

<style>
  figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

Thank you for your help. I am on business plan.

However, I tried both your solutions. Neither has had any effect.

First, I tried pasting the code you suggest to the PAGE HEADER CODE INJECTION on advanced page settings.

This had no visible effect.

Second I tried a code block, also no visible effect.

The page looks exactly the same?
 
I would be so grateful for your help!!!

2 hours ago, MarcusEl said:

Thank you for your help. I am on business plan.

However, I tried both your solutions. Neither has had any effect.

First, I tried pasting the code you suggest to the PAGE HEADER CODE INJECTION on advanced page settings.

This had no visible effect.

Second I tried a code block, also no visible effect.

The page looks exactly the same?
 
I would be so grateful for your help!!!

New page uses Gallery Block, not Gallery Section, so it needs a different complete code

You mean make these text show on hover image?

Quote

You mean make these text show on hover image?

yes, that's what I mean!! Thank you for your reply.

3 hours ago, MarcusEl said:

yes, that's what I mean!! Thank you for your reply.

First text or bottom? I see text is long, but image too short

the text in the image titles, saying "image credit"

e.g. what I want is it to say "image credit: Yuichiro Chino (Getty images)" when the mouse hovers over the image,

and likewise for the other images on that page

On 7/16/2022 at 12:31 AM, MarcusEl said:

e.g. what I want is it to say "image credit: Yuichiro Chino (Getty images)" when the mouse hovers over the image,

 

and likewise for the other images on that page

Add to Research Page Header

<style>
  .sqs-gallery-block-stacked.sqs-gallery-block-show-meta .meta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    padding-left: 20px;
    opacity: 0;
    transition: all 0.3s;
}
.sqs-gallery {
    position: relative;
}
.sqs-gallery-block-stacked.sqs-gallery-block-show-meta .meta * {
    color: white;
    font-size: 18px;
}
.gallery-block:hover .meta {
    opacity: 1;
    transition: all 0.3s;
}
</style>

THANK YOU SO MUCH, it finally works!!!