adincampbell

The problem seems to go away when using Flex Site-wide animation. Could this be an issue with the site-wide animation conflicting with the portfolio?

Site URL: https://cod-smilodon-fkfw.squarespace.com/

I have attached an image below showing what flickers. Before the webpage loads, the portfolio flickers on screen for a second. Is there any way to hide this or allow the portfolio to fade-in with the global squarespace website fade in animations?

I am using custom css on the portfolio so this is most likely causing it but wondering if theres a way to hide and/or fade the load in. Any ideas?

14 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

.grid-item:hover h3 {
  color: #fff;
}

Let me know how it works on your site

Works great THANKS!

Site URL: https://cod-smilodon-fkfw.squarespace.com

For the gallery page. I am trying to figure out how to invert the text to white when hovering over grid-overlay so it is visible. So when it fades to black the text inverts to white.

Here is the page: https://cod-smilodon-fkfw.squarespace.com

21 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Portfolio Page - Custom Layout */
@media screen and (min-width:768px) {
	.portfolio-grid-overlay .grid-item {
    height: auto !important;
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 0 !important;
}
.portfolio-grid-overlay .grid-item>div {
    width: 50% !important;
    float: left !important;
    opacity: 1 !important;
    padding: 0 !important;
}
.portfolio-text {
    position: relative !important;
}
.portfolio-overlay {
    display: none !important;
}
div#gridThumbs>a:nth-child(even) {
    flex-direction: row-reverse !important;
}
.grid-image-inner-wrapper {
    position: relative !important;
}}

 

Thanks so much! Works great. Modified the code a little bit added some subheadings and here is how it looks now: https://cod-smilodon-fkfw.squarespace.com/

Instead of disabling portfolio overlays:

I am trying to keep those hover animations though, and have them reversed instead where hovering over transitions/inverts the text color and the banner overlay darkens when hovering over. Example: https://adincampbell.com/ Been trying to figure that out.

Also the page does flicker quite a bit when reloading the page. Not sure what is causing this in the custom css but I think it has to do with it overriding squarespaces default settings in portfolio grid settings with the custom css, not sure if there is a workaround for this.

On 4/1/2022 at 3:12 AM, tuanphan said:

Can you share link to page where you added? We will try some code

Heres the page: https://cod-smilodon-fkfw.squarespace.com/

6 hours ago, tuanphan said:

Hi. I think this is possible with Sections Only + Custom Code

Or Gallery Section + Code

or List Section

Do you still need help on this?

Hi I've tried using Sections but I like the idea of being able to hover over and click the entire section. I think gallery + code is the closest yet. I have used some custom css to make the gallery 1 row down. Other than that I couldn't figure out how to alternate the gallery items left and right and add a box to the opposite side moving the text and description into that as well.

Site URL: https://adincampbell.com/