Cannot set content property of img tag in Firefox

Question

I am editing some gallery images of a SquareSpace website. I am essentially trying to add a hover effect. I have it working on all browsers besides Firefox.

I essentially have a hidden image and the opacity of this image changes on hover.

The issue seems to be with setting the content property of the img tag.

figure:nth-child(1) div.gallery-grid-item-wrapper {
     background-image:  url("url/to/original/image")!important;
     background-size: cover;
     background-position: 50% 50%;
    }
    

figure:nth-child(1) img {
        content: url("url/to/hover/image"); 
      opacity: 0!important;
    }
    

figure:nth-child(1) img:hover{
        opacity: 1!important;
       transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
    }

Is there a different way to set the content of an image for firefox browsers? Unfortunately, because the original website is made with Squarespace, I cannot change class names, or use any JavaScript.

Answer 1

I was able to get it to work by not targeting the image but instead using first-child like so:

 figure:nth-child(1) div.gallery-grid-item-wrapper{
 background-image: url("url/to/original/image")!important;
 background-size: cover;
 background-position: 50% 50%;
}

figure:nth-child(1) div.gallery-grid-item-wrapper :first-child {
    content: url("url/to/hover/image");
  opacity: 0!important;
}

  figure:nth-child(1) div.gallery-grid-item-wrapper :first-child:hover {
        opacity: 1!important;
       transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
        max-width:100%;
        max-height:100%;
    }