爲改變圖像添加CSS緩入和緩出過渡

當您將鼠標懸停在某個標識上時，我試圖添加簡單的緩解和緩解效果。我知道有關於此的帖子。我已經嘗試了許多不同的CSS組合，但似乎無法讓它工作。爲改變圖像添加CSS緩入和緩出過渡

我已經成功地通過這個CSS代碼改變時懸停內容改變的標誌顏色：

#dealertrackr-image.et_pb_image:hover { 
content: url('image url'); 
}

當上空盤旋，從黑白狀態着色狀態標誌的變化。我現在希望能夠在懸停和釋放懸停時擁有1秒的緩入和緩解。沒有什麼，我嘗試工作。

http://www.nationalgalactic.com/divisions/

來源

2015-05-01 JoeK

如果你所希望的只是灰度，那麼你可能也會對加載全綵圖像和使用CSS濾鏡去飽和/重新懸浮感興趣。

這與CSS的轉變相結合，將創造一個可愛的小褪色：

img { 
    -webkit-filter: grayscale(100%); 
    filter: gray; filter: grayscale(100%); 
    filter: url(desaturate.svg#greyscale); 
    -webkit-transition: all .25s ease; 
    -moz-transition: all .25s ease; 
    transition: all .25s ease; 
} 
img:hover { 
    -webkit-filter: grayscale(0%); 
    filter: none; 
}

*編輯這是一個純CSS的解決方案，但沒有在Android的傑利貝恩和Internet Explorer完全支持。如果完整的瀏覽器支持對您很重要，請在這篇文章中看到isherwood的回答。爲了獲得全面支持，您的解決方案僅限於堆疊圖像或JavaScript。

來源

2015-05-01 15:42:09

不錯，除了IE和Jelly Bean Android。 http://caniuse.com/#search=grayscale – isherwood

偉大的一點。如果全力支持是重要的（它總是），伊舍伍德有上面正確的答案涉及堆疊的衰落圖像。唯一的缺點是每個圖像的雙重請求。 –

這個完美的作品。謝謝 – JoeK

與圖像做的唯一方法是堆疊元素和過渡頂層的不透明度。瀏覽器不會執行圖像到圖像的轉換。

像這樣的事情，那裏的錨固裝置爲背景圖片：

a { 
 
    display: inline-block; 
 
    background: url(http://lorempixel.com/400/150/nature) left top no-repeat; 
 
} 
 
a img { 
 
    transition: opacity 1s; 
 
} 
 
a:hover img { 
 
    opacity: 0; 
 
}

<a href="#"> 
 
    <img src="http://lorempixel.com/400/150/nature/2" alt=""> 
 
</a>

Here's a demo與您的代碼和圖片。

來源

2015-05-01 15:33:23 isherwood

這也適用。謝謝 – JoeK

我喜歡這種方式，那麼簡單 – Asta

爲改變圖像添加CSS緩入和緩出過渡

回答

相關問題