Seeking CSS (Custom code) for image gallery; Upon cursor hover overlay have description appear ~ Thank YOU!!

Hi there,

I am seeking out some code for an image gallery section I have on my homepage.  I would like to have the description of the image appear as a hover overlay when the cursor is put on it.  Currently the only option is to have the text live below the image.

I have attached a screenshot of what it currently looks like for context.

Thank you so much for the help in advance! 

Katie

@tuanphan thank you so much for the assistance and the code!!

This gave me what I was trying to achieve!! However, where in this code can I change the color of the text on the hover? That's the only edit I'd like to make with this 🙂

You can view the edits live on my homepage at www.bykatieboyle.com

On 8/16/2024 at 5:19 AM, bykatieboyle said:

@tuanphan thank you so much for the assistance and the code!!

 

This gave me what I was trying to achieve!! However, where in this code can I change the color of the text on the hover? That's the only edit I'd like to make with this 🙂

 

You can view the edits live on my homepage at www.bykatieboyle.com

Change this line

/* title */
.gallery-caption 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;
}

to this

/* title */
.gallery-caption 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;
color: #f1f !important;
}

Hi @tuanphan !

I am so sorry I somehow missed this response to the code update.  Thank YOU so much!  I however, just noticed, that for some reason the link no longer works with this image gallery.  I have all the images displayed on my homepage hyperlinked to its case study.  Do you have any insight as to how I can reconcile this?

www.bykatieboyle.com

Thank you again!! I truly appreciate it.

On 9/24/2024 at 11:01 PM, bykatieboyle said:

Hi @tuanphan !

 

I am so sorry I somehow missed this response to the code update.  Thank YOU so much!  I however, just noticed, that for some reason the link no longer works with this image gallery.  I have all the images displayed on my homepage hyperlinked to its case study.  Do you have any insight as to how I can reconcile this?

www.bykatieboyle.com

Thank you again!! I truly appreciate it.

Find this CSS code

div[class*="-item-wrapper"]:after {
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

change it to this

div[class*="-item-wrapper"]:after {
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    pointer-events: none;
}

perfect! Thank you @tuanphan !!