如何編輯此代碼以製作反轉模糊效果？

Question

這是我從一個博客

here is the link cause I can't seem to make it work here

複製的代碼，我希望它是在第一模糊然後在懸停模糊應該消失。

這裏是我的測試博客>（SOVED）

如果將鼠標懸停在文章的縮略圖，你可以看到它是模糊， 所以，我想要的是 - 我想要的縮略圖，首先是模糊，當徘徊時，模糊應該消失。

請大家幫忙。感謝

Answer 1

感謝您更新您的原始問題，以澄清您實際要求的內容。看完你的博客後，我意識到你正在努力達到的目標。

你需要的是一個基本的模糊過濾器，當圖像懸停時可以關閉，除了簡單的:hover選擇器之外，還可以使用CSS filter: blur();屬性實現此功能。

在圖像的默認樣式，模糊濾鏡應設置爲默認模糊，因此CSS將是：

.image { 
    filter: blur(3px); 
    transition: all 0.3s; 
} 

要注意：上述transition屬性給出了模糊的「褪色'效應。

當你將鼠標懸停在圖像（.image:hover），過濾器應改變，這樣不再有一個出現在圖像上的模糊，因此CSS將是：

.image:hover { 
    filter: blur(0px); 
} 

如果你想讀更多關於CSS濾鏡模糊效果，have a look here。

我編以上成的jsfiddle示例，您可以利用，希望能夠稍微好一點的解釋我的回答：Example

如果您有任何問題，請隨時問。

Answer 2

簡單一點的代碼，因爲你想要的效果：

figure { 
 
    background: black; 
 
    color: white; 
 
    width: 20em; 
 
} 
 
figure .image { 
 
    background: transparent url("") center/0 0 no-repeat; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
figure .image:before, 
 
figure .image:after { 
 
    background-image: inherit; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    content: ""; 
 
    display: block; 
 
    filter: blur(5px); 
 
    transform: scale(1.1); 
 
} 
 
figure .image:before { 
 
    padding-top: 66.6667%; // define image ratio. Here 3:2 
 
} 
 
figure .image:after { 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    transition: filter 200ms; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
figure figcaption { 
 
    padding: 1em; 
 
} 
 
figure:hover .image:after { 
 
    filter: blur(0px); 
 
}

<figure> 
 
    <div class="image" style="background-image: url(http://loremflickr.com/900/600/brazil,rio)"></div> 
 
    <figcaption>Some caption</figcaption> 
 
</figure>

Answer 3

搜索你的代碼爲

.gallery-wrapper:hover img.gallry_img { 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out; 
    -ms-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out; 
    -webkit-filter: blur(-3px); 
    filter: blur(-3px); 
    -moz-filter: blur(-3px); 
} 

而且與下

.gallery-wrapper img.gallry_img { 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out; 
    -ms-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out; 
    -webkit-filter: blur(-3px); 
    filter: blur(-3px); 
    -moz-filter: blur(-3px); 
} 
.gallery-wrapper:hover img.gallry_img { 
    -webkit-filter: blur(0px); 
    filter: blur(0px); 
    -moz-filter: blur(0px); 
} 

更換