Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hover Over Image to Reveal Background Image


2 answers to this question

Recommended Posts

  • 0

You will need to put a code block in, with html that makes a div with a class.

Put both images inside the div, then we can use CSS to swap them out.

I helped someone here get it working, once you get the code block set up I can help you get the CSS done.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post

Link to post
  • 0


Hey @rwp thanks for the reply and helping out!

I think I have the two images working here: https://www.loxd.io/home-2 However, how can I have it styled where the images display as full-width banners? And have the background images only change when the hover is on the logotype?

I have the desired effect here https://www.loxd.io/portfolio-2 through manipulating the portfolio layout styling, however is there a simpler way to achieve this similar look through CSS? 



Share this post

Link to post

Create an account or sign in to comment

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

  • Create New...