Show different image on hover in Envira gallery (wordpress)

I want to show a different image on hover in an Envira gallery in wordpress.

The gallery has 20 images, for each image i want to show its individual hover image.

I can reach the image via the general style.css like that:

.envira-gallery-item-1:hover{
background-image: url('1-2-1.jpg');
opacity: 0.5;
}

In this way it is possible to get an opacity change on hover, but i can´t change the image itself.

The generated HTML for that one item (copied from inspector) looks like this:

  <div id="envira-gallery-item-115" class="envira-gallery-item
  enviratope-item envira-gallery-item-1" style="padding-left: 5px;
  padding-bottom: 30px; padding-right: 5px; position: absolute; 
  left: 0px; top: 0px;" itemscope=""
  itemtype="http://ift.tt/wWCeUo">
      <div class="envira-gallery-item-inner">
          <a href="http://localhost:8888/november/ss16look1-1"
          class="envira-gallery-96 envira-gallery-link"
          rel="enviragallery96" title="1-1" data-envira-caption="1-1"
          data-envira-retina="" data-thumbnail="" itemprop="contentUrl">
              <img id="envira-gallery-image-115" class="envira-gallery-image
              envira-gallery-image-1" data-envira-index="1"
              src="http://localhost:8888/november/wp-content/uploads/2016/06/1-1-640x480.jpg" 
              data-envira-src="http://localhost:8888/november/wp-content/uploads/2016/06/1-1-640x480.jpg" 
              data-envira-gallery-id="96" data-envira-item-id="115" 
              alt="" title="1-1" itemprop="thumbnailUrl" 
              srcset="http://localhost:8888/november/wp-content/uploads/2016/06/1-1-1280x960.jpg 2x" 
              style="opacity: 1;"></a></div></div>

Is there a way to change each image to another image on hover within the gallery?

via Chebli Mohamed