Search code examples
cssgoogle-chromedrop-shadow

CSS is producing a box shadow not a drop shadow

I have the image below and have written code in an external style sheet so that when you rollover the image it creates a drop shadow, however it is only creating a box shadow. The code I am using is:

enter image description here

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

Where am I going wrong?

Solution

  • The image you posted isn't a transparent png...of course the shadow is going to be shown around the 'box-model'. Here, your ideal means of having a hover-shadow is to have 2 images and toggle between them on hover.

    a real drop-shadow ( run snippet to see the 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('https://i.sstatic.net/wQGBI.png')}
    <div class="pick"></div>