Change image hover gif in portfolio Grid

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');
}

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

Thanks a lot, it work beautifully !