Jump to content

Change image hover gif in portfolio Grid

Recommended Posts

Hello I'm trying to have a gif on hover in my portfolio grid.
I've tried the code below, but I still have issues.

here is my website:  https://www.mariusmarius.com/projects
 

/// GRID HOVER // 

/*general setting for second image*/
section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item .grid-image:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}


section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item:hover .grid-image-inner-wrapper {
  opacity: 0;
}

/*set url for each item*/
section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item:first-child .grid-image:after {
  background-image: url('https://static1.squarespace.com/static/662c9dff3e082112d79c9bd6/t/665fc11d1914c865b4bc0abf/1717551425705/KAKTUS.gif');
}

section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item:nth-child(2) .grid-image:after {
  background-image: url('https://static1.squarespace.com/static/662c9dff3e082112d79c9bd6/t/665fc11d1914c865b4bc0abf/1717551425705/KAKTUS.gif');
}

Link to comment
  • Replies 2
  • Views 173
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

13 hours ago, Studio_Marius said:

Hello I'm trying to have a gif on hover in my portfolio grid.
I've tried the code below, but I still have issues.

here is my website:  https://www.mariusmarius.com/projects
 

/// GRID HOVER // 

/*general setting for second image*/
section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item .grid-image:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}


section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item:hover .grid-image-inner-wrapper {
  opacity: 0;
}

/*set url for each item*/
section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item:first-child .grid-image:after {
  background-image: url('https://static1.squarespace.com/static/662c9dff3e082112d79c9bd6/t/665fc11d1914c865b4bc0abf/1717551425705/KAKTUS.gif');
}

section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item:nth-child(2) .grid-image:after {
  background-image: url('https://static1.squarespace.com/static/662c9dff3e082112d79c9bd6/t/665fc11d1914c865b4bc0abf/1717551425705/KAKTUS.gif');
}

You can try this custom CSS

section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item .grid-image:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  opacity: 0;
}

section[data-section-id="6649142bd6eacf1c975b0064"] .grid-item:hover .grid-image:after {
  opacity: 1;
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.