CSS产生的是框阴影，而不是下拉阴影

我有下面的图像，并且在外部样式表中编写了代码，这样当您滚动图像时，它会创建一个放置阴影，但它只是创建一个框阴影。我使用的代码是：

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

---

我哪里出错了？

您发布的图像不是一个透明的png…当然阴影将显示在“长方体模型”周围。在这里，拥有悬停阴影的理想方法是有两个图像，并在悬停时在它们之间切换

真实的阴影（运行代码段以查看效果）：：

.pick{宽度：225px；高度：225px；背景图像：url（'http://i.imgur.com/CeYiLOd.png'）；-o-转变：.5s；
-ms转换：.5s；
-moz转变：.5s；
-webkit转换：.5s；}
.pick:hover{背景图像：url（'http://i.stack.imgur.com/wQGBI.png“）}

---

您的图像需要是透明的PNG。如果图像不是透明的，则阴影将显示在图像周围

我更新了你的png，它在这里工作：

。拾取：悬停{
-webkit过滤器：投影（5px 5px 5px#222）；
过滤器：放置阴影（5px 5px 5px#222）}

---

该图像的背景不透明。阴影正在应用于图像的背景。谢谢，我才刚刚开始学习CSS。我可以在photoshop中编辑背景使其透明吗？啊…在photoshop中修复。非常感谢。