Zeigen Sie ein anderes Bild auf Hover in Envira Galerie (WordPress)

Question

Ich möchte ein anderes Bild auf Hover in einer Envira-Galerie in WordPress zeigen.

Die Galerie hat 20 Bilder, für jedes Bild möchte ich ihr eigenes Hover-Bild zeigen.

kann ich das Bild über die allgemeine style.css so erreichen:

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

Auf diese Weise ist es möglich, eine Opazität Änderung auf schweben zu bekommen, aber ich kann nicht das Bild selbst verändern.

Der erzeugte HTML für diesen einen Punkt (von Inspektor kopiert) sieht wie folgt aus:

<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://schema.org/ImageObject"> 
     <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> 

Gibt es eine Möglichkeit, jedes Bild zu einem anderen Bild auf schweben in der Galerie zu ändern?

Answer 1

Es scheint mir, wie Sie die Deckkraft des Bildes selbst auf 0 und setzen ein Hintergrundbild auf dem übergeordneten Container festlegen möchten:

.envira-gallery-item-1 .envira-gallery-item-inner { 
    background: url('1-2-1.jpg') !important; 
} 
.envira-gallery-item:hover img { 
    opacity: 0 !important; transition: opacity .2s; 
} 

Seit Envira auf seinen Galerien einen schweren Styling fügt hinzu, werden Sie muss den meisten CSS-Regeln !important hinzugefügt werden.