1

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?

DeDee
  • 1,972
  • 21
  • 30
James Novis
  • 343
  • 5
  • 15
  • The background of that image is not transparent. The drop-shadow is being applied to the background of the image. – APAD1 Apr 14 '15 at 16:46

2 Answers2

1

Your image needs to be a transparent PNG. If your image isn't transparent the shadow will be shown around the image.

I updated your png and it works here:

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

In order to accomplish this I opened it in Photoshop, and used the magic wand tool to select the white surrounding the image and deleted it.

Carson Crane
  • 1,197
  • 8
  • 15
0

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.stack.imgur.com/wQGBI.png')}
<div class="pick"></div>
beauXjames
  • 8,222
  • 3
  • 49
  • 66