gcerceo

@tuanphan circling back on this scrolling/fade effect seen here >> www.grahamcerceo.com

O, just realized the effect is not fading in or out with the scroll up or down the page. The page is smooth scrolling though, and that's nice. The effect I'm going for is more like a status bar scroll, with the copy fading in/out when the viewport reaches that section. Does that make sense? And it's all screwed up on mobile, I'll need to add a parameter for it to resize the copy for the mobile version. https://www.grahamcerceo.com/

This is great, thank you! Need to do some tweaking to make it work. How can we keep the code box from being so long and making the section so long, after inputting all that code into it? And, I'd like to make the text my H2 size.

Hi, I'm hoping to implement this Codepen onto my website in the section below my hero, to reveal fade in/out this description. Follow up question is, does mobile affect it at all? codepen: https://codepen.io/gusevdigital/pen/dygLbqJ my site: https://www.grahamcerceo.com Thanks SS Superstars!

Update– I'm playing around with the padding for the desired size of the shape. What tag would allow for the shape to scale with different lengths of the captions? And, scale for mobile screen size?

Love it. Thank you. In my own coding, I was missing the other containers above the lowest level. Now to tweak. What other tag can I use to make the pill wrap to the varied length of the caption for each of my portfolio thumbnails? And, expand it to be a little taller. Follow up, to ensure it scales appropriately for mobile. Assuming I'll need the min-max screen size tags, right?

Apologies, I put the URL in the form when posting. I prefer a completely rounded pill, not a round-corner rectangle. The corner radius is 8px or 16px, cant recall off the top of my head. www.grahamcerceo.com Would also like to add a translucent/blur fill to them.

Hi SS Forums, I'm having trouble locating any online documentation for customization of portfolio-text (captions) beyond just basic text styling. My goal is to create a pill-shaped box (similar to one of my button styles - not pictured), around the portfolio-text on my portfolio thumbnails, seen below in the screenshot.

Very good question. I'd like the opposite, aligning navigation to the baseline grid. And, splitting it up much wider than whats available in the standard nav menu design options.

@tuanphan great! When I add the font-size CSS to .portfolio-text, the font size doesn't change for some reason, size of p2 I'm also trying to tighten it up closer to the image, the line-height is enormous, especially when the portfolio-text is smaller.

@tuanphan I tried the link and code above and it did not work for me. It removed the entire section. I'm using portfolio grid:overlay on desktop, and would like to put the titles under the thumbnails on mobile since hover states aren't active on mobile. www.grahamcerceo.com

If I wanted to swap the portfolio:hover layout to grid:overlay, is there a way I could I use an autoplaying mp4 as the thumbnail? Using a looping gif of frames from the video, I'm playing around with as the thumbnail.

Correct. A video that's autoplaying. I will upload a video into SS, once I have the code

The entire section disappears with the code in that link. When I /* */ each group to see what's causing it to disappear, it seems to be the @max width string.

www.grahamcerceo.com is my index.

I am trying to this also. I have hover:follow cursor on desktop, and would like to force gallery:simple on mobile + have the portfolio titles underneath the images. www.grahamcerceo.com

Your original code worked great. Not sure why it was giving me errors at first. Thank you @tuanphan you're amazing!

Correction, your first code string worked.

Not sure what happened, but now none of the appropriate URLs are linking through to their pages. Everything goes to the dummy portfolio pages.

What was the code for this effect? I'm using portfolio hover:fixed, and would like to have two of the titles preview an auto-playing loop video. I have them with gifs right now, it could look better as a plain mp4. www.grahamcerceo.com/portfolio-test

YES! Works like a charm. I noticed the li: adjustment. Now I'm experiencing each link going to the dummy portfolio pages on mobile, instead of proper URLs, and while in Chrome incognito.

@tuanphan thank you for providing these workarounds. I'm finishing this work now and having some trouble with SS only linking the first page as all the other pages, despite having the appropriate URL for each page placed exactly where you instructed. Here's my code, and the page. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function() { $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(1)').attr('href','https://www.grahamcerceo.com/brand-refinement'); $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(2)').attr('href','https://www.grahamcerceo.com/brokermint-baddies'); $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(3)').attr('href','https://www.grahamcerceo.com/in-house-video'); $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(4)').attr('href','https://www.grahamcerceo.com/customer-stories'); $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(5)').attr('href','https://www.grahamcerceo.com/how-it-works-refresh'); }); </script> https://www.grahamcerceo.com/portfolio-test

Yes grahamcerceo.com/portfolio-test

Yes, I'd like to use 4 different custom URLs of pages already built for those 4 links. And, have the ability to add more in the future.

Same here. I enjoy the portfolio list interactions but would like them to click through to other normal blank pages I've already built out with content. www.grahamcerceo.com/portfolio-test Is there a way to achieve this @tuanphan ?