CODEWITHSUNDEEP
cssradial-gradients
Hady
Hady

Reputation: 2674

Circular background behind a transparent png image

I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.

If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?

Have a look at at the following example that illustrates what I am trying to describe: http://jsfiddle.net/rNeaZ/2/

The 4th example (shown in link above) in particular doesn't suit what I am after because:

Upvotes: 0

Views: 704

Answers (2)

Lea Verou
Lea Verou

Reputation: 23907

The simplest solution would be to add an appropriate background-color, but that would only work when you need an offset of 0 0, like your example.

The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.

Upvotes: 0

rockerest
rockerest

Reputation: 10518

It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.

Upvotes: 1

Related Questions