how can i give Drop shadow for particular part of an png image on hover?

98 views Asked by At

i have a png image set as a background...

its displayed completely in responsive view...

whenever i hover on the part of this image only that particular part should have drop shadow effect.

is it possible to do this? and how can i do this?

1

There are 1 answers

0
Yakk - Adam Nevraumont On

Generate the background image from a vector document in CorelDRAW. Each component you want a dropshadow on should be its own object (or group of objects).

Rasterize.

Now, make a given part of the image have a dropshadow. Rastersize. Repeat, giving each a useful name.

Generate diffs between the original image and the dropshadow images. One way might be to xor the original image with the dropshadow images. Another might be to reverse-alpha-composite them.

Most of the diffs should be zero. Strip a rectangle out of the diff images.

Now, in CSS, when you want the dropshadow to show up, use the opposite blend mode of the operation you used to generate the diff. If you used xor to do the diff, use xor between the diff-image and the original. If you used reverse-alpha-composite, use alpha-compositing.

I'm not an expert on how css3 blending works, you will have to experiment with what diff mode and what blend mode to use.

You could also just swap between the entire rendered images.