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

Question

Hello, I'm trying to do a hover image swap on the background image. I see a lot of resources for swapping images within code blocks but not for background images. 

I have my working code here, but so far have not been working:

[data-section-id="5dadd9923707f45fc260b448"]

 .section-background {
 visibility: hidden;
  opacity: 0 !important;
}
.section-background:hover {
 visibility: visible;
  opacity: 1 !important;
}

Any help will be very appreciated! Thanks!

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

Link to page please.


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
[data-section-id="5dadd9923707f45fc260b448"] .section-background img {
  opacity: 0;
  transition-property: transform,opacity;
  transition-timing-function: ease;
  transition-duration: 0.8s;
  transition-delay: 0.284211s;
}

[data-section-id="5dadd9923707f45fc260b448"]:hover .section-background img {
  opacity: 1;
}

 


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

Create an account or sign in to comment

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


×
×
  • Create New...