CSS小圖放大預覽是一種優雅的方式來增加網頁用戶交互的效果。當用戶鼠標懸停在一個小的縮略圖上時，通過一定的技巧，可以允許用戶放大圖像并查看更多的細節。下面這個例子展示了如何使用CSS來實現這一功能。

/* 小圖樣式 */
.thumbnail {
width: 100px;
height: 100px;
overflow: hidden;
}
/* 放大預覽樣式 */
.preview {
position: absolute;
left: 150%;
top: 0;
width: 300px;
height: 300px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 9999;
}
/* 鼠標懸停時的效果 */
.thumbnail:hover .preview {
opacity: 1;
left: 100%;
}

在這個例子中，我們首先定義了一個縮略圖容器，它的大小是100x100像素，并且overflow設置為hidden，這意味著圖像超出容器大小的部分將被隱藏。接下來，我們定義了一個放大預覽的容器，它的寬度和高度都是300像素，并且它的位置被設置為絕對定位。我們還設置了一個opacity屬性并將其初始值設置為0，這意味著剛開始時預覽圖是隱藏的。

最后，我們把鼠標懸停時的效果添加到縮略圖容器上。當鼠標懸停在容器上時，我們通過設置.preview的left屬性和opacity屬性來顯示預覽圖。left屬性的值被設置為100%，這意味著預覽圖會從縮略圖容器的右側向左移動并顯示在縮略圖旁邊。同時，我們使用CSS的transition屬性來使預覽圖的顯示和隱藏更加平滑。

通過這種方式，我們可以為網頁添加一個優美的效果，使用戶交互更加流暢。這種技術可以用于電子商務網站中的產品展示，博客文章圖片展示等等。