CSS中有一種很常用的交互效果，就是當鼠標懸浮在某個元素上時，該元素的大小會發生變化，這被稱為圖片獲取焦點變大。這種效果可以用CSS來實現，下面我們就來介紹一下如何實現。

/* 首先給需要變化元素設置一個初始狀態 */
img {
transition: transform .2s ease-out;
/* 注意這里使用 transform 屬性，而不是 width 和 height，因為 transform 比其他兩個更加流暢 */
transform: scale(1);
}
/* 然后給元素設置鼠標懸浮時的狀態 */
img:hover {
transform: scale(1.1);
/* 鼠標懸浮時，將元素的大小放大到原來的 1.1 倍 */
}
/* 鼠標離開時的狀態 */
img:active {
transform: scale(0.9);
/* 鼠標點擊時，將元素的大小縮小到原來的 0.9 倍 */
}
/* 這里還可以加上一些其他的特效 */
img:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border-radius: 5px;
}

這樣，當鼠標懸浮在圖片上時，它就會自動放大，離開時則縮小回去。這種效果可以讓頁面更加生動有趣，給用戶更好的體驗。

需要注意的是，這種效果對于網頁性能來說可能會有一定的影響，因為它需要不斷觸發瀏覽器的重排和重繪，所以在實際使用中應該盡量減少使用。