Image Reveal on Hover

Sabrina Carpenter

Sex After 60

Code block on page

<center><div class="lightbox-video">
    <h3>

      <!-- 1 -->
      <div class="nav-image-wrapper">
        <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/1025944347">Sa<em>b</em>rin<em>a</em> Ca<em>r</em>pen<em>te</em>r</a>
        <img src="/s/pink-bow-sabrina-carpenter-min-n9wp.png" height="200" style="top:-52px; left: 7%;">
      </div>

      <!-- 2 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/1025945076"><em>S</em>ex<em></em> A<em>ft</em>er<em> 6</em>0</a>
         <img src="/s/sex-after-60-min.png" height="150" style="top:72px; left:70%;">
      </div>

      <!-- 3 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/1025943516">Dov<em>e</em> Came<em>r</em>on</a>
         <img src="/s/dove-cameron-min.png" height="150" style="top:125px; left: 12%;">
      </div>

      <!-- 4 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/1025944547"><em>A</em>shl<em>ey</em> Pa<em>r</em>k</a>
         <img src="/s/ashley-park-safety-pins-min.png" height="150" style="top:225px; left:70%;">
      </div>
  
      <!-- 5 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/805363914">Qui<em>n</em>ta Br<em>u</em>nson</a>
         <img src="/s/quinta-brunson-cake.png" height="150" style="top:280px; left:72%;">
      </div>

      <!-- 6 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/805363508"><em>L</em>ind<em>s</em>ay Lo<em>h</em>an</a>
         <img src="/s/lindsay-lohan-rose.png" height="200" style="top:330px; left:10%;">
      </div>

      <!-- 7 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/897447678">C<em>h</em>loe Bai<em>l</em>ey</a>
         <img src="/s/chloe-bailey-silver.png" height="200" style="top:430px; left:70%;">
      </div>

      <!-- 8 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/893140410">L<em>a</em>tto</a>
         <img src="/s/latto-dragon-tattoo.png" height="250" style="top:445px; left:70%;">
      </div>

      <!-- 9 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/897017351"><em>H</em>alle B<em>a</em>il<em>e</em>y</a>
         <img src="/s/halle-bailey-coat.png" height="200" style="top:550px; left:10%;">
      </div>

     <!-- 10 -->
      <div class="nav-image-wrapper">
        <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/897447113">St<em>a</em>y (f<em>o</em>r a li<em>t</em>tl<em>e</em>)</a>
        <img src="/s/stay-motorcycle.png" height="200" style="top:650px; left: 2%;">
      </div>

     <!-- 11 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/813899824">N<em>i</em>col<em>a</em> Pelt<em>z</em></a>
         <img src="/s/nicola-peltz-ring.png" height="200" style="top:725px; left:80%;">
      </div>
      
     <!-- 12 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/897016554"><em>F</em>ig<em>u</em>re i<em>t</em> o<em>u</em>t</a>
         <img src="/s/figure-it-out-butterfly.png" height="150" style="top:850px; left:70%;">
      </div>
     
      <!-- 13 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/893141935">kai<em>m</em>in</a>
         <img src="/s/kaimin-top.png" height="150" style="top:922px; left: 7%;">
      </div>

      <!-- 14 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/893118310"><em>A</em>le<em>x</em> C<em>o</em>ope<em>r</em></a>
         <img src="/s/alex-cooper-heart.png" height="150" style="top:975px; left:13%;">
      </div>

      <!-- 15 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/1025960393">O<em>B</em>X B<em>o</em>y<em>s</em></a>
         <img src="/s/obx-poker-min.png" height="150" style="top:1070px; left:70%;">
      </div>

      <!-- 16 -->
       <div class="nav-image-wrapper">
         <a class="videoLightbox__button" href="#" data-video="https://player.vimeo.com/video/288223673"><em>R</em>EE<em>L</em> </a>
         <img src="/s/film-reel-min.png" height="150" style="top:1170px; left:27%;">
      </div>
  </h3>
  </center>

Custom CSS — Advanced > Page Header Code Injection

/* IMAGE REVEAL ON HOVER ******/
  .nav-image-wrapper img {
    opacity: 0;
  }
  
  .nav-image-wrapper:hover img {
    opacity: 1;
  } 
  
  .nav-image-wrapper img {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    display: block;
  }
  
  .nav-image-wrapper img {
    position: absolute;
  }
  
  @media screen and (max-width: 900px) {
    .nav-image-wrapper img {
      display: none
    }
  }

Source: The Square Stylist