CSS是產生一個盒子陰影不是陰影

Question

我有下面的圖像，並在外部樣式表中編寫代碼，以便當您翻轉圖像時它創建一個陰影，但它只創建一個盒子陰影。我使用的代碼是：

.Pick:hover { 
    -webkit-filter: drop-shadow(5px 5px 5px #222); 
    filter: drop-shadow(5px 5px 5px #222); 
} 

我要去哪裏錯了？

Answer 1

您發佈的圖片不是透明PNG ......當然，陰影將顯示在「盒模型」周圍。在這裏，懸停陰影的理想方法是在懸停時有2張圖像並在它們之間切換。

一個真正的下拉陰影（運行段才能看到效果）::

.pick { width: 225px; height: 225px; background-image: url('http://i.imgur.com/CeYiLOd.png');-o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; } 
 
.pick:hover { background-image: url('http://i.stack.imgur.com/wQGBI.png')}

<div class="pick"></div>

Answer 2

您的圖片必須是透明的PNG。如果圖像不透明，則會在圖像周圍顯示陰影。

我更新您的PNG和它的作品在這裏：

.pick:hover { 
 
    -webkit-filter: drop-shadow(5px 5px 5px #222); 
 
    filter: drop-shadow(5px 5px 5px #222); }

<img class="pick" src="http://i.imgur.com/CeYiLOd.png">

爲了做到這一點，我在Photoshop中打開它，並用魔棒工具選擇環繞的白並將其刪除。