Cleaner page loading - Code block lazy loading?

Hi, 

I have built my portfolio website home page so that it is a grid of different colored rectangles, on hover each colour reveals an 'teaser' image from the project.

This is currently achieved using code blocks with an 'image swap' setup. Annoyingly it doesnt load very nicely - its glitchy and there is no fade in. 

Ideally, I would like each page to 'lazy load' cleanly, with no flicker, in a similar way to the Instagram grid on the play section of my website (which is an Instagram grid block and the default fade-in is very nice)

Any suggestions or help would be hugely appreciated please! 


https://www.dantonedesign.com/

Dan

Try adding to Design > Custom CSS (just a test code for image blocks)

body.homepage {
.image-block:hover .image-block-wrapper {
    background-image: url(https://cdn.pixabay.com/photo/2023/06/04/11/42/river-8039447_1280.jpg);
    transition: all 0.3s ease;
}

.image-block:hover .image-block-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}

}

Thanks! - that works as a generic hover image swap for image blocks on the home page

How can I now make this work for specific blocks so they change to specific images please?

Huge thanks in advance!

On 8/1/2023 at 5:13 AM, dantone1 said:

Thanks! - that works as a generic hover image swap for image blocks on the home page

How can I now make this work for specific blocks so they change to specific images please?

Huge thanks in advance!

 

Use this new code

#image-block-id1 {
.image-block-wrapper {
    background-image: url(https://cdn.pixabay.com/photo/2023/06/04/11/42/river-8039447_1280.jpg);
    transition: all 0.3s ease;
}
&:hover .image-block-wrapper img {
    opacity: 0;
    transition: all 0.3s ease;
}}

Replace #image-block-id1 with Image block id. You can use this tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

thank you so much!

Hi @tuanphan, sorry im back again - its not quite working yet.

The goal visually is for it to look like below (please see for desired image title spacing)

- The image swap doesn't seem to work when i set the image block to 'Stack' - is there any code tweak that would get the image swap to work with image stack? 

https://www.dantonedesign.com/

thanks for all the help so far!

@tuanphan  I have managed to solve by just using inline image blocks and adjusting the description margin/padding... but a new issue had appeared on a couple of pages... Section height set to '0' used to look great for top sections as it sat was in-line with the bottom of  the header. suddenly it has started displaying the top of the top section below the header?

any idea how i can solve this please?

https://www.dantonedesign.com/

Hi,

It is fine to me

I am using a workaround by using having an empty image block in a section above - which is fine for now, thanks