Display 2nd product image on hover within Shopify collection loop

product-grid-item.liquid

<a href="{{ product.url | within: collection }}" class="grid__image" {% if template == 'product' %}onclick="ga('send', 'event', 'Related Products', 'Clicked Related Product - {{ product.type }}', '{{ product.title }}');"{% elsif template == 'index' %}onclick="ga('send', 'event', 'Homepage Products', 'Clicked Best Sellers - {{ product.title }}');"{% endif %}>
  {% if product.images.size > 1 %}
    <img src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape  }}" />
   	<img src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape  }}"  style="display:none" />
  {% else %}
    <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
  {% endif %}
</a>

theme.scss

.product-grid a:hover img:last-child {
    display: block !important;
}
.product-grid a:hover img:first-child {
    display: none;
}