Custom coded gallery overlay not linking out to individual pages

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

Hoping someone on this forum can help me.

I am a graphic designer trying to re-vamp my brand and website. I have very basic knowledge of HTML/CSS so whenever I try to customize something, I tend to rely on these forums. Here is my portfolio site: https://www.nityzinser.com/

I have a gallery-simple layout with different images. Each image links to different password - protected individual pages.

I used this code (see below) to create a custom overlay/description popping on while hovering. However, whenever I insert this code, the overlay prevents the image from linking out to the individual pages. Any help would be greatly appreciated.

Here's the code I used:

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(227,220,237,90); /* 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: rgba(29,60,37,100) /*caption font color */
}

.gallery-grid-item {
position: relative;
}

.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}

.gallery-caption-grid-simple {
transition-delay: 1ms;
}
 

On 8/9/2021 at 6:43 AM, nzinser said:

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

Hoping someone on this forum can help me.

I am a graphic designer trying to re-vamp my brand and website. I have very basic knowledge of HTML/CSS so whenever I try to customize something, I tend to rely on these forums. Here is my portfolio site: https://www.nityzinser.com/

I have a gallery-simple layout with different images. Each image links to different password - protected individual pages.

I used this code (see below) to create a custom overlay/description popping on while hovering. However, whenever I insert this code, the overlay prevents the image from linking out to the individual pages. Any help would be greatly appreciated.

Here's the code I used:

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(227,220,237,90); /* 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: rgba(29,60,37,100) /*caption font color */
}

.gallery-grid-item {
position: relative;
}

.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}

.gallery-caption-grid-simple {
transition-delay: 1ms;
}
 

Hi. Don't remove any code in your current code.

Add this to Design > Custom CSS

/* Enable gallery hover click */
.gallery-caption {
    pointer-events: none;
}

Thank you so much @tuanphan! That worked! If you can solve another issue that would be great.

On my website, I inserted custom css, and a footer code injection to move the navigation header below the first section of the page. However I only want this on my home page and not all of the other pages.

On 8/12/2021 at 4:28 AM, nzinser said:

Thank you so much @tuanphan! That worked! If you can solve another issue that would be great.

On my website, I inserted custom css, and a footer code injection to move the navigation header below the first section of the page. However I only want this on my home page and not all of the other pages.

Hi. Which code did you add? Can you post here? We can tweak it

@tuaphan

this is the code I place for code injection in the footer section:

<script>
    (function () {
        window.addEventListener('load', function () {
            var header = document.querySelector('header');
            var sections = document.querySelectorAll('section');
            sections[0].after(header);
        });
    })();
</script>

And this is the code i placed in the custom css section:

header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
}

Hi,

Remove the code & add this to Homepage Header (Hover Homepage on Pages > Main Navigation or Not Linked > Click Gear icon to open Page Header

<script>
    (function () {
        window.addEventListener('load', function () {
            var header = document.querySelector('header');
            var sections = document.querySelectorAll('section');
            sections[0].after(header);
        });
    })();
</script>
<style>
  header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
}
</style>