Shopify image cross fading

image.css

.grid-link__image-centered{
  display:block;
  position:relative;
  .original{
    opacity:1;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;

  }
  .alternative{
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    position:absolute;
    top:0px; 
    left:0px;
    opacity:0;
    left: 50%;
    top: 50%;

    /*
    Nope =(
    margin-left: -25%;
    margin-top: -25%;
    */

    /* 
    Yep!
    */
    transform: translate(-50%, -50%);

  }
  &:hover{ 
    .original{
      opacity:0;

    }
    .alternative{
      opacity:1;
    } 
  }
}

product-image

<span class="grid-link__image-centered">
        
        {% assign notused = true %}
        {% for image in product.images %}
        {% if notused and image.id != product.featured_image.id %}
        <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" class="original">
        <img src="{{ image | img_url: image_size }}" alt="{{ image.alt | escape }}" class="alternative">
        {% assign notused = false %}
        {% endif %}
        {% endfor %}
        {% if notused %}
        <img src="{{ product.featured_image.src | img_url: image_size }}" alt="{{ product.featured_image.alt | escape }}">
        {% endif %}
      </span>