title: Add Hover Feature On Product Image
body: <p>I am trying to add a feature to show an alternative product picture when the cursor hovers over the product image in a collection view. </p>
  
  <p>Whenever I view the page with the code below, the product images have shifted to the bottom of the container and also cover the Title/Price that was below them. </p>
  
  <p>What can I correct to keep the pictures in their original alignment and have only the hover effect work? </p>
  
  <p>Thank you! </p>
  
  <p>Here is what I currently have in product-card-grid.liquid -- </p>
  
  <pre><code>&lt;div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js"&gt;
      &lt;div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};"&gt;
       &lt;div class="reveal"&gt;
        &lt;img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              src="{{ product.featured_image | img_url: '300x300' }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ product.featured_image.aspect_ratio }}"
              data-sizes="auto"
              alt=""&gt;
        &lt;img id="{{img_id}}"
             class="hidden" 
             src="{{ product.images.last }}"
             data-src="{{ img_url }} "
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ product.featured_image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ product.images.last.alt | escape }}"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The css for "Reveal" is below: </p>
  
  <pre><code>  /* ===============================================
  // Reveal module
  // =============================================== */
  
  .reveal .hidden { display: block !important; visibility: visible !important;}
  .product:hover .reveal img { opacity: 1; }
  .reveal { position: relative; }
  .reveal .hidden { 
    position: absolute; 
    z-index: -1;
    top: 0; 
    width: 100%; 
    height: 100%;  
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;  
  }
  .reveal:hover .hidden { 
    z-index: 100000;
    opacity: 1;    
  }
  .reveal .caption {
    position: absolute;
    top: 0;  
    display: table;
    width: 100%;
    height: 100%;
    background-color: white; /* fallback for IE8 */
    background-color: rgba(255, 255, 255, 0.7);
    font: 13px/1.6 sans-serif;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 1px;
    text-align: center;
    text-rendering: optimizeLegibility;
  }
  .reveal .hidden .caption .centered {
    display: table-cell;
    vertical-align: middle;
  }
  
  @media (min-width: 480px) and (max-width: 979px) {
    .reveal .caption { 
      font-size: 11px; 
    }
  }
  </code></pre>