Clickable image gallery

Site URL: https://www.filmmining101.com/hall-of-fame-1/beautiful-shots

Hi,

Just two problems with my image gallery! Every time I upload some pictures in my website and I have the option 'image caption' set as off, the image description I have put will appear nonetheless (you can see this in the page). And I cannot enlarge the pictures - they seem unclickable.

I want to make the image description to hover so I used this code that I found out:

.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: 1rem !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;
}

However, in order to do that, I have to do the 'captions' on. If I do, then I have the same description hovering and at the bottom. On top of that, even if I still turn the caption off, the description is still displayed - is this a bug or I am doing something wrong? And why the pictures are not clickable?

Any help, super appreciated!

George

To make it clickable, 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;
}

with problem 1, the url doesn't exist. Can you check it again?

Thank you. Worked like a charm!

For some reason, the caption problem has disappeared now 😕

But for your reference, here is the link:

https://www.filmmining101.com/hall-of-fame/beautiful-shots

19 minutes ago, sladewilson871 said:

Thank you. Worked like a charm!

For some reason, the caption problem has disappeared now 😕

But for your reference, here is the link:

https://www.filmmining101.com/hall-of-fame/beautiful-shots

I still see gallery caption on hover here? 

It looks now exactly how I wanted it to be for some reason! Weird

On 4/2/2022 at 11:24 AM, tuanphan said:

To make it clickable, 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;
}

with problem 1, the url doesn't exist. Can you check it again?

Hello @tuanphan
while researching about captions, i could also implement successfully your code. But i wouldnt necessarily need it in the gallery simple grid, but inside on the image itself.
so, i couldnt find a hover over description/caption on the whole image on the last level, when entered the image. You have given me a code to integrate in the code injection footer, but that was one line and going far beyond the picture itself and not hover.

Do you have a code for hover over on the current image size ?

Thank you, apreciate if you could help.

https://www.lonniwong.com/ceramic-art/objects

On 11/7/2022 at 9:27 AM, LonniWong said:

Hello @tuanphan
while researching about captions, i could also implement successfully your code. But i wouldnt necessarily need it in the gallery simple grid, but inside on the image itself.
so, i couldnt find a hover over description/caption on the whole image on the last level, when entered the image. You have given me a code to integrate in the code injection footer, but that was one line and going far beyond the picture itself and not hover.

Do you have a code for hover over on the current image size ?

Thank you, apreciate if you could help.

https://www.lonniwong.com/ceramic-art/objects

 

You mean hover image in lightbox mode > show overlay or?

5 hours ago, tuanphan said:

You mean hover image in lightbox mode > show overlay or?

Yes, exactly @tuanphan