Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom coded gallery overlay not linking out to individual pages


nzinser

Question

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;
}

 

Link to comment

5 answers to this question

Recommended Posts

  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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;
}

Link to comment
  • 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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...