Custom homepage grid layout (no overlay)

Hi! I need some assistance with creating a very simple grid layout for my homepage. If you go to my url you can see I currently have a grid layout and when you hover over an image, there's an overlay and the name of the page appears. Instead of this happening on hover, I would like the image to zoom in slightly (say 20%). No overlay and no text. There is another Squarespace gird layout that does this but then it has the page name underneath which I also don't want. 

I tried searching for a code but had no luck so if anyone on here would help me that would be amazing!

Thanks heaps,

Coby 

Can you share your website URL?

3 minutes ago, CobyBP said:

There is another Squarespace gird layout that does this but then it has the page name underneath which I also don't want. 

Switch to this section type and I'll give you a little CSS to hide the title and add the zoom.

On 8/24/2023 at 4:43 PM, Ziggy said:

Can you share your website URL?

Switch to this section type and I'll give you a little CSS to hide the title and add the zoom.

Hi, thanks for getting back to me, and sorry about the late reply! My url is: https://www.c-b-p.com.au/

Some CSS to hide the title and add a slight zoom would be amazing!

@CobyBP You can add this code snippet under Custom CSS panel:

.portfolio-grid-overlay .grid-item:hover .portfolio-text {
	opacity: 0 !important;
}

.portfolio-grid-overlay .grid-item:hover .portfolio-overlay {
	opacity: 0 !important;
}

.portfolio-grid-overlay .grid-item:hover .grid-image img {
	transform: scale(1.15);
	transition: 0.2s;
}

You can adjust the number "1.15" in the last block of code to control the size of the image on hover. Thanks!

21 hours ago, Lesum said:

@CobyBP You can add this code snippet under Custom CSS panel:

.portfolio-grid-overlay .grid-item:hover .portfolio-text {
	opacity: 0 !important;
}

.portfolio-grid-overlay .grid-item:hover .portfolio-overlay {
	opacity: 0 !important;
}

.portfolio-grid-overlay .grid-item:hover .grid-image img {
	transform: scale(1.15);
	transition: 0.2s;
}

You can adjust the number "1.15" in the last block of code to control the size of the image on hover. Thanks!

Thanks Lesum! That worked 🙂