google chrome - CSS is producing a box shadow not a drop shadow -


i have image below , have written code in external style sheet when rollover image creates drop shadow, creating box shadow. code using is:

enter image description here

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

where going wrong?

the image posted isn't transparent png...of course shadow going shown around 'box-model'. here, ideal means of having hover-shadow have 2 images , toggle between them on hover.

a real drop-shadow ( run snippet see effect ) ::

.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>


Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

node.js - How to abort query on demand using Neo4j drivers -