The Codebase

Filter through all the code

Find the Squarespace tutorial, plugin or snippet that’s going to help you fix or customize your client’s site in a heartbeat.

All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Ripple icon card style - Auto Layout Carousel (7.1)

Give your project’s Auto Layout Carousel cards a subtle but dynamic hover effect with this snippet! In under 5 minutes, you’ll achieve a cool ripple effect behind the icons when hovering over the corresponding expanded button. Through the code, you’ll get to control the border styles, rounded corners, icon background and ripple color, icon size, title styles and button styles with ease, while still having the ability to use the section’s native options to adjust the spacing and font sizes to match your design.

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Ripple icon card style - Auto Layout simple list (7.1)

Give your project’s Auto Layout Simple List cards a subtle but dynamic hover effect with this snippet! In under 5 minutes, you’ll achieve a cool ripple effect behind the icons when hovering over the corresponding expanded button. Through the code, you’ll get to control the border styles, rounded corners, icon background and ripple color, icon size, title styles and button styles with ease, while still having the ability to use the section’s native options to adjust the spacing and font sizes to match your design.

Read More
All CSS tricks, 7.1, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Hover/overlay Beatriz Caraballo

Staggered blog post highlight - Blog page (7.1)

Spruce up your client project’s blog pages with this quick layout restructuring and styling snippet. It will automatically expand certain slides on your 3 or 4-column grid to make them more prominent, as well as give all the cards a clean yet versatile look that you can adjust to match your design. You’ll be able to tweak the colors of the cards, and the bubble-looking categories on the left-top corner of the thumbnails.

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Dot-style cards - Auto Layout simple list (7.1)

Looking for a cool dynamic effect to add to your Auto Layout Simple List cards? Look no further! With this copy/paste plugin you’ll be able to add a clean static style and eye-catching hover mode in a single swoop. Plus, through the snippet settings you’ll get to control the color of the “dots”, set up two titles with their own styles, and manage how visible the image becomes on hover, to fully match the look of your section to the rest of your project.

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Dot-style cards - Auto Layout carousel (7.1)

Looking for a cool dynamic effect to add to your Auto Layout Carousel cards? Look no further! With this copy/paste plugin you’ll be able to add a clean static style and eye-catching hover mode in a single swoop. Plus, through the snippet settings you’ll get to control the color of the “dots”, set up two titles with their own styles, and manage how visible the image becomes on hover, to fully match the look of your section to the rest of your project.

Read More
All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Cool look, Hover/overlay Beatriz Caraballo

Expansive cards on hover - Auto Layout Simple List (7.1)

Add a little something something to your project’s Auto Layout Simple List with this cool hover mode expansive effect. You’ll be able to set a custom icon for all the cards to mark them with your site’s brand, continue to modify the settings of the text through the native options, control the thumbnails saturation/opacity levels on both the initial and hover mode, and automatically get a sleek and responsive look on tablets and mobile, regardless of how many cards you set up on desktop!

Read More

Bordered items with hover overlay for Related Products - Shop pages (7.1)

Create a stylish line-look for the related items in your 7.1 Shop Pages with this short code. You’ll have the ability to style the border, overlay color and icon, and even set up a floating title label however you want to make it as prominent or subtle as you wish!

Read More

Bordered items with hover overlay - Auto Layout Carousel (7.1)

Give your Auto Layout Carousels a super custom look with this code snippet! It’ll instantly add a border to your list items, create an overlay on hover with the icon of your choice, and you’ll even be able to set up a floating label with whichever text you want to highlight on each slide!

Read More