Clickable image with caption on hover

Site URL: http://lolascottart.com/test

Hello! I have no experience in CSS but I've been finding some code via web searches to customize my site.

/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}
//-- make the overlay transparent, and cover the image
.layout-caption-overlay-hover .image-caption-wrapper {background:transparent!important; min-height:100%; top:0!important;}

//--change the color of the text
.layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:	#ffffff!important;}

.image-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sqs-block.image-block .image-caption-wrapper p{ font-size: 16px !important;}
.sqs-block-image .image-caption p {  font-size: 16px; font-weight: 100 !important;  font-style: normal;  color: #ffffff;  line-height: 0.00em;}
.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption a {
  display: block;
  padding: 100em;
  margin: -100em;
}

Hi. The url doesn't exist.

On 1/26/2021 at 10:43 AM, lobot said:

Site URL: http://lolascottart.com/test

Hello! I have no experience in CSS but I've been finding some code via web searches to customize my site.

My goal: I'd like to see a caption when hovering over an image, and be able to click on the image to visit a full gallery.

My issue: the code I have allows a capion on hover, but then the click through link stops working. I do not want just the text to be hyperlinked, but rather. the whole image should be clickable.

 

This is the page I am working on: http://lolascottart.com/test

This is code I have gotten from various google searches and youtube videos.

/* enable click */
body#collection-5fcaa11867453b32ebba7c40 figcaption.image-caption-wrapper {
    pointer-events: none;
}
//-- make the overlay transparent, and cover the image
.layout-caption-overlay-hover .image-caption-wrapper {background:transparent!important; min-height:100%; top:0!important;}

//--change the color of the text
.layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:	#ffffff!important;}

.image-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sqs-block.image-block .image-caption-wrapper p{ font-size: 16px !important;}
.sqs-block-image .image-caption p {  font-size: 16px; font-weight: 100 !important;  font-style: normal;  color: #ffffff;  line-height: 0.00em;}
.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption-wrapper {
  overflow: hidden !important;
}

.image-caption a {
  display: block;
  padding: 100em;
  margin: -100em;
}

I appreciate any help. Thank you.

I have the same exact question! My url is https://naomiokita.com/

So how do I add a custom css for a clickable image with captions on hover to the coding, I already have 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

On 4/18/2021 at 1:49 AM, naomiokita said:

I have the same exact question! My url is https://naomiokita.com/

So how do I add a custom css for a clickable image with captions on hover to the coding, I already have 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

Edit this code

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none; /* enable click */
}

On 4/19/2021 at 12:18 PM, tuanphan said:

Edit this code

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none; /* enable click */
}

 

I tried both codes, Added @naomiokitacode  ( bellow ) plus did the change @tuanphan mentioned to make it clickable, but the hover effects appears a second the moment I paste the code, then it disappears 😞 so when I save and refresh the website, the hover is not working anymore, don't know why. Could someone help me please? Thank you website www.kiyary.com

On 4/17/2021 at 8:49 PM, naomiokita said:

I have the same exact question! My url is https://naomiokita.com/

So how do I add a custom css for a clickable image with captions on hover to the coding, I already have 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

On 10/14/2021 at 4:18 AM, kiyary said:

I tried both codes, Added @naomiokitacode  ( bellow ) plus did the change @tuanphan mentioned to make it clickable, but the hover effects appears a second the moment I paste the code, then it disappears 😞 so when I save and refresh the website, the hover is not working anymore, don't know why. Could someone help me please? Thank you website www.kiyary.com

 

 

I see it is fine to me. Did you figure it out?

16 hours ago, tuanphan said:

I see it is fine to me. Did you figure it out?

yes, you helped me 🙂 thank you!!

I have the same issue! The code works how i'd like it to, but the second I save and click away it disappears.

My URL is: https://banjo-manatee-6wnp.squarespace.com/

Password: RFCreative1

Here's the code I'm working with:

.gallery-caption {

position: absolute;

top: 0;

left: 0;

background: rgba(0, 92, 93, 0.9); /* overlay color */

height: 100%;

max-width: unset;

padding: 0;

opacity: 0;

}

.gallery-caption-wrapper {

display: flex;

align-items: center; /* center vertically */

justify-content: center; /* center horizontally */

}

.gallery-caption-content {

font-size: 2rem !important; /* caption font size */

color: white; /*caption font color */

}

.gallery-grid-item {

position: relative;

}

.gallery-grid-item:hover .gallery-caption {

opacity: 1;

}

.gallery-caption-grid-simple {

transition-delay: 0ms;

}

On 10/13/2022 at 11:53 PM, RFred said:

I have the same issue! The code works how i'd like it to, but the second I save and click away it disappears.

My URL is: https://banjo-manatee-6wnp.squarespace.com/

Password: RFCreative1

Here's the code I'm working with:

.gallery-caption {

position: absolute;

top: 0;

left: 0;

background: rgba(0, 92, 93, 0.9); /* overlay color */

height: 100%;

max-width: unset;

padding: 0;

opacity: 0;

}

.gallery-caption-wrapper {

display: flex;

align-items: center; /* center vertically */

justify-content: center; /* center horizontally */

}

.gallery-caption-content {

font-size: 2rem !important; /* caption font size */

color: white; /*caption font color */

}

.gallery-grid-item {

position: relative;

}

.gallery-grid-item:hover .gallery-caption {

opacity: 1;

}

.gallery-caption-grid-simple {

transition-delay: 0ms;

}

You mean My Work Section?

On 10/15/2022 at 7:44 PM, tuanphan said:

You mean My Work Section?

Yes!

On 10/18/2022 at 10:45 PM, RFred said:

Yes!

You are using Fluid Engine Image/Text, above code is for Gallery Section in Classic Editor

Use this code to make text clickable

/* see my work titles clickable */
.fe-block-02d4cc4a28322d5e64b9, .fe-block-b3c3f0640bdc0d9f9166, .fe-block-yui_3_17_2_1_1665677865810_15840 {
    pointer-events: none;
}

On 10/20/2022 at 1:47 AM, tuanphan said:

You are using Fluid Engine Image/Text, above code is for Gallery Section in Classic Editor

Use this code to make text clickable

/* see my work titles clickable */
.fe-block-02d4cc4a28322d5e64b9, .fe-block-b3c3f0640bdc0d9f9166, .fe-block-yui_3_17_2_1_1665677865810_15840 {
    pointer-events: none;
}

 

Unfortunately that didn't work! I don't need the text to be clickable. Currently the text is awkwardly sitting below the images.

I need the caption to appear on hover, with a green overlay, on the images. I also need the caption/overlay/image to be clickable.

The code works perfectly (screenshot attached), until I save and click away. 

21 hours ago, RFred said:

Unfortunately that didn't work! I don't need the text to be clickable. Currently the text is awkwardly sitting below the images.

I need the caption to appear on hover, with a green overlay, on the images. I also need the caption/overlay/image to be clickable.

The code works perfectly (screenshot attached), until I save and click away. 

Can you share link to page in your screenshot? My code is for this Work section

On 10/22/2022 at 7:07 AM, tuanphan said:

Can you share link to page in your screenshot? My code is for this Work section

It is for "My Work" page

https://banjo-manatee-6wnp.squarespace.com/work

This code

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 a: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 a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}