在圖庫中添加鼠標拖曳效果縮略圖

Question

在this網頁上，有一個我喜歡的縮略圖鼠標懸停效果。
這個效果可能與CSS3或jQuery？
我搜索了很多找到這種效果，但我找不到一個。
請給我一個解決方案。

Answer 1

這個效果是用兩個圖像和JavaScript完成的。
他們相互添加了兩個圖像，只是觸發display。當您非常快速地將元素懸停時，這會造成非常糟糕的懸停效果。

所以對於這個效果，CSS3要好得多！只需在鏈接中添加背景圖像，向鏈接添加背景圖像轉換，並在懸停元素時更改背景圖像。

Here is a working CodePen Demo

要改變的效果或動畫式的持續時間，看看到this頁面，它告訴你所有的不同的動畫類型。

---

編輯
要有過渡的持續時間較長，當你的鼠標指向了當您懸停鼠標相比，只是增加一個額外的transition聲明。
Here再次運行Codepen Demo，其中0.3s懸停持續時間和1s懸停持續時間。

a{ 
    /* This is the transition, when you hover OUT the element */ 
    transition: background 1s; 
} 

a:hover{ 
    /* This is the transition, when you hover ON the element */ 
    transition: background 0.3s; 
}