Note: This post assumes you have some basic level understanding of JS/HTML/CSS. To request a custom Squarespace tweak get in touch here.

Request

Can you create a mouseover effect so these brand names change to a different color when you mouseover the image? Also, the links for these images are not able to open in a new window.

Problem

As it is, this particular gallery design doesn't allow clickthrough in new tab and creating a rollover for the Carousel (while possible) is a little trickier than the grid.

Solution

After hacking around I figured it would be easier to code it from scratch using a JQuery plugin called Slick.

Here's how you can do it too, to create the same hover effect and enable your clickthrough links to open in a new tab.

How to Install a Custom Carousel Gallery for Squarespace Using Slick

Step 1.

Add the following code to your PAGE HEADER CODE INJECTION

Step 2.

Put this code in a Code Block wherever you want your gallery to be. Note the target="_blank" attribute in the <a> tag. This will ensure your image links open in a new tab.  I'm also using 2 images, the 2nd is your mouseover image. 

Step 3.

Put this script in a Code Block. You'll find the settings here to customize things like your gallery speed, responsiveness and a lot more.

Step 4. 

Insert the following in your Design > Custom CSS. The first 3 lines handle the mouseover effect. Hiding the 2nd image unless the mouse if over the 1st. Make sense?

When it's done here's what you get...