Jump to content

Custom homepage grid layout (no overlay)

Recommended Posts

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 

Link to comment
  • Replies 4
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 3 weeks later...

@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!

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
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 🙂 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.