Enviraギャラリー（ワードプレス）のホバー上に別のイメージを表示する

Question

私はホバリングで、ワードプレスのEnviraギャラリーに別のイメージを表示したいと思います。

ギャラリーには20個の画像があり、画像ごとに個別のホバー画像を表示したい。ホバー上の不透明度の変更を取得することが可能である。このように

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

を、しかし、私は、画像自体を変更can't：

私はそのような一般的なのstyle.cssを介して画像に到達することができます。

（インスペクタからコピーされた）その1つの項目について生成されたHTMLは次のようになります。

<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> 

はギャラリー内ホバー上の別の画像にそれぞれの画像を変更する方法はありますか？

Answer 1

あなたが0に画像自体の不透明度を設定し、その親コン​​テナの上に背景画像を入れたいようですが、私には思える：

.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; 
} 

Enviraは、そのギャラリーの上に重いスタイリングが追加されますので、必要になりますほとんどのCSSルールに!importantを追加する必要があります。