写个shopify产品页产品缩略图应用示例，并且有css代码

以下是一个 Shopify 产品页产品缩略图应用示例，包括 HTML 和 CSS 代码：

HTML 代码：

<div class="product-images">
  <div class="thumbnail-container">
    <img src="https://example.com/image1.jpg" alt="Product Image">
  </div>
  <div class="thumbnail-container">
    <img src="https://example.com/image2.jpg" alt="Product Image">
  </div>
  <div class="thumbnail-container">
    <img src="https://example.com/image3.jpg" alt="Product Image">
  </div>
  <div class="thumbnail-container">
    <img src="https://example.com/image4.jpg" alt="Product Image">
  </div>
</div>

CSS 代码：

.product-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.thumbnail-container {
  width: 80px;
  height: 80px;
  margin: 10px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.thumbnail-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease-in-out;
}

.thumbnail-container:hover img {
  transform: scale(1.2);
}

这个示例创建了一个包含产品缩略图的 `product-images` 容器。每个缩略图都包含在一个具有 `thumbnail-container` 类的 div 容器中，其中包含一个img元素，显示产品缩略图。

CSS 样式为 `.thumbnail-container` 容器设置了固定的宽度和高度，并添加了一个边框。`overflow: hidden` 可以确保图像不会超出容器的边界。当鼠标悬停在缩略图上时，缩略图将变大1.2倍，用过`transform: scale(1.2)`属性来实现。

请注意，此示例中使用的图像 URL 仅供演示目的。在 Shopify 中，您将需要替换这些 URL 为您的实际产品图像 URL。