A request from another designer to create an effect similar to the one on the Minimalissimo Supply store - this is a breakdown of how I'd recreate it in Squarespace 7.1.

I discuss my reasoning and my process and walkthrough my thoughts too.

Original store link:
[ Ссылка ]

It'll work on any Squarespace plan and requires no additional libraries or scripts.

Feel free to ask any questions in the comments below, if you get stuck or want to know a bit more.

=============================================

If my tutorials/tips have helped you, feel free to send me some coffee as a thank you :)
[ Ссылка ]

Interested in more Squarespace tutorials, tips and tricks?
Why not visit the SquareSkills website for more content like this:
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]

If you're looking for something specific, some custom design, development or coding work, you can reach out to me via my website:
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]

Here's the code used in the video. You can modify the properties to tailor it to match your branding and style - or take it even further.

=============================================

Insert into CSS:

/***********************
* Squareskills.dev
* Minimalissimo Inspired Product Grid
*******************************/

YOURSECTION/COLLECTIONID {
.nested-category-title {
display: none!important;
}
// Remove Spacing
.products {
background: white;
padding: 0!important;
}
.list-grid {
grid-gap: 0!important;
grid-auto-flow: dense;
border-right: 1px solid black;
}

//Style Grid Items
.grid-item {
// border: 1px solid black;
box-shadow: inset 0 1px 0 0 black, inset 1px 0 black, 0 1px 0 0 black, 1px 0 0 0 black;
padding: 4rem;
position: relative;
cursor: pointer;
grid-row: span 1;
margin-bottom: 0!important;
}
.grid-item:nth-of-type(3){
grid-column: span 2;
grid-row: span 2;
}

// Meta Info
.grid-meta-wrapper {
position: absolute;
inset: 1.5rem;
width: auto!important;
}
.grid-main-meta {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.grid-title, .grid-prices {
opacity: 0;
transition: all .5s ease;
}
.grid-title {
transform: translateX(-.5rem) translateY(.5rem);
}
.grid-prices {
transform: translateX(.5rem) translateY(.5rem);
}
.grid-item:hover :is(.grid-title, .grid-prices){
opacity: 1;
transform: translateX(0) translateY(0);
}
// Image
.grid-image {
transition: transform .5s ease;
transform: none;
}
.grid-item:hover .grid-image {
transform: scale(.9);
}
}

свернуть