Jump to content

Change Background Image on Text Hover / Change Portfolio Link to Redirect to Lightbox

Recommended Posts

Site URL: https://mused-interiors.squarespace.com/

I need help with a specific feature on Squarespace. My client is an interior design studio, and wants all of her projects as large links on display, just like the Portfolio page on the Background > Hover mode.

This solution would usually be perfect, but the client also wants her website to be a mostly long scrolling page, so she doesn’t want the project links going to another page, but rather a pop up/ lightbox. I bought Lightbox Anything plugin from SQSP Themes to achieve any link going to a lightbox.

I’ve uploaded the js and css files and tested the code and it does indeed work, but I haven’t figured out how to make it work with the project link opening to a Lightbox. So I need either of the following:

Change background image on hover for text link

I created a blank page with each project text link that opens to the lightbox pop-up and it works perfectly. Since this was a blank page and NOT a portfolio page though, it doesn’t change the background image when I hover over each project.  For this instance, I need to change the background hovers.


Change coding to have the portfolio links open the lightbox pop up

I used a portfolio page and created projects for each like normal. However, I’m trying to redirect each project link away from a separate page and point it towards the new pop up. For some reason, the code isn’t working.

Website Login Info: 
Website: https://mused-interiors.squarespace.com/
Password: mused

If anyone could help me, I would really appreciate it!

Link to comment

To change Portfolio Link to Lightbox Link, try edit this code

$(document).ready(function() {

to this new code

$(document).ready(function() {


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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.