Navigation link menu reveals images on hover

Hi Everyone,

I have a feeling this may be a longer thread as theres a few things I'm trying to accomplish with javascript, css, and html on a test page. My intention is to save this section and bring it into my index once its working properly as my main content navigation menu. 

My first hurdle has been whether or not to use an ul & li, I found a codepen that I swapped with my images and font styling. Conversely, I've inspected other more successful use cases of this effect and seen people use a <div> and classes for an anchor tag (right now my list is not clickable). the list items need to be links, because its going to be navigation to those project pages.

My second hurdle may be a result of the codepen using lists instead of div and classes to only target those specific items. Anyone who is much more experienced with coding conventions, please help me out here– the text and formatting of all the template pages when I go to 'add section' are all messed up and broken. I assume because of the codepen css and ul/li stuff... how can I create this effect but not effect the SS built in page templates?

My third hurdle is also somehow related to the codepen JS. The text blocks are missing if I add a section and add a text block. And, in those other sections the background photo moves when I hover on the list item. I removed the section above the blue main body section, to keep the problem focused. 

Its all related I know, but trying to knock out one thing at a time. I feel like its partially working, the 2nd and third hurdle are the big ones, because I've tried to use IDs and classes for the LI but that doesn't seem to work.

www.grahamcerceo.com/home-1

pw: boom

Thanks for the help. 

10 hours ago, gcerceo said:

Hi Everyone,

I have a feeling this may be a longer thread as theres a few things I'm trying to accomplish with javascript, css, and html on a test page. My intention is to save this section and bring it into my index once its working properly as my main content navigation menu. 

My first hurdle has been whether or not to use an ul & li, I found a codepen that I swapped with my images and font styling. Conversely, I've inspected other more successful use cases of this effect and seen people use a <div> and classes for an anchor tag (right now my list is not clickable). the list items need to be links, because its going to be navigation to those project pages.

My second hurdle may be a result of the codepen using lists instead of div and classes to only target those specific items. Anyone who is much more experienced with coding conventions, please help me out here– the text and formatting of all the template pages when I go to 'add section' are all messed up and broken. I assume because of the codepen css and ul/li stuff... how can I create this effect but not effect the SS built in page templates?

My third hurdle is also somehow related to the codepen JS. The text blocks are missing if I add a section and add a text block. And, in those other sections the background photo moves when I hover on the list item. I removed the section above the blue main body section, to keep the problem focused. 

Its all related I know, but trying to knock out one thing at a time. I feel like its partially working, the 2nd and third hurdle are the big ones, because I've tried to use IDs and classes for the LI but that doesn't seem to work.

www.grahamcerceo.com/home-1

pw: boom

Thanks for the help. 

I think we can achieve your sample by using portfolio page with the style: hover - follow cursor

Have you tried it yet?

Wow @Beyondspace with the dunk! Thats definitely helpful! That solves a lot of my initial problems. I can now format it with css.

I have a few other things I'd like to implement now thats sorted out.

On this site, the cursor position wobble on the floating background images. And, creating the parallax on those images with a static display headline block floating. Is that a scrolling JS library?

Here is a custom site that has a few really delightful UX notes to it. Theres obvs some limitations on a SS site., but I know I can incorporate some types of interactions that enhance my splash page.

I'll post my test page once I get some of those parallax fx in it.

And thank you @Beyondspace I'v wrestled all week with my test homepage in an attempt to hobble and experiment.

@Beyondspace I have a new question about the Portfolio templates & the linking on the parent pages. How can I change the links on the main portfolio page, to link to existing pages (that aren't part of the portfolio project)? I have 4 other pages I want to use as the linked pages instead of the templated portfolio projects. 

If there's an existing forum solution/thread, please share. I don't want you to re-hash a comment if someone has already done this.

On 3/7/2023 at 11:14 PM, gcerceo said:

 I have a new question about the Portfolio templates & the linking on the parent pages. How can I change the links on the main portfolio page, to link to existing pages (that aren't part of the portfolio project)? I have 4 other pages I want to use as the linked pages instead of the templated portfolio projects. 

If there's an existing forum solution/thread, please share. I don't want you to re-hash a comment if someone has already done this.

 

 

This is possible with some code. Do you still need help?

Yes

grahamcerceo.com/portfolio-test

On 3/7/2023 at 11:14 PM, gcerceo said:

I have a new question about the Portfolio templates & the linking on the parent pages. How can I change the links on the main portfolio page, to link to existing pages (that aren't part of the portfolio project)? I have 4 other pages I want to use as the linked pages instead of the templated portfolio projects. 

If there's an existing forum solution/thread, please share. I don't want you to re-hash a comment if someone has already done this.

 

 

Try this code