鼠标放到小图上，小图加边框，左边大图同步显示对应的图片。

这个功能可以通过 JavaScript 和 CSS 来实现。以下是一个简单的实现方式：

1. 给小图加上鼠标移上去时需要显示的边框样式，例如：

.thumbnail:hover {
  border: 1px solid #ccc;
}

2. 给小图添加鼠标移入事件监听器，当鼠标移入时，获取对应的大图地址并设置到大图的 `src` 属性中，例如：

<img class="thumbnail" src="small-image-1.jpg" data-large-image="large-image-1.jpg" alt="Small Image 1">
<img class="thumbnail" src="small-image-2.jpg" data-large-image="large-image-2.jpg" alt="Small Image 2">
<img class="thumbnail" src="small-image-3.jpg" data-large-image="large-image-3.jpg" alt="Small Image 3">

<img id="large-image" src="large-image-1.jpg" alt="Large Image">

<script>
  const thumbnails = document.querySelectorAll('.thumbnail');
  const largeImage = document.getElementById('large-image');

  thumbnails.forEach(thumbnail => {
    thumbnail.addEventListener('mouseenter', () => {
      const largeImageSrc = thumbnail.dataset.largeImage;
      largeImage.src = largeImageSrc;
    });
  });
</script>

在这个例子中，我们给每个小图添加了一个 `data-large-image` 属性，用于保存对应的大图地址。当鼠标移入小图时，我们获取到对应的大图地址，并将其设置到大图的 `src` 属性中，从而实现了同步显示大图的功能。

需要注意的是，这只是一个简单的实现方式，如果需要更复杂的效果，可能需要使用一些 JavaScript 库或框架来实现。