Jump to content

Background Image Hover Swap

Recommended Posts

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:


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

Any help will be very appreciated! Thanks!

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

[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;


Link to comment

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.