當鼠標不在圖像中時縮放轉換

Question

我還沒有找到答案，我在我的網站上有一個圖像，並帶有hover當鼠標在圖像上時，我有一個小的縮放轉換，但是如果鼠標不在圖像上，沒有轉換 是否可以平滑過渡到初始位置？ 如果是，如何？

感謝

Answer 1

您需要添加過渡到元素，而不是:hover。

img { 
 
    height: 200px; 
 
    transition: all 0.4s; 
 
} 
 
img:hover { 
 
    transform: scale(1.2); 
 
}

<img src="http://butlers-web.com/Content/Images/BW%20Logo%203.0.png" />