Menu
I'm trying to create a embossed effect on an image (like a polaroid). so there should be a box-shadow on the top and the left edge insetted to the picture. But it isn't working... is this a browser problem:
I have created a jsfiddle http://jsfiddle.net/PEgBv/25/ to show what i want.
I like it like on the second div box, (where it is working). But on the images, the shadow is only displayed without the inset attribute.
Working with chrome14 on linux
589
To make the surrounding <a> (or whatever element) expand to cover all the content (the image) you need to add display: inline-block; to it, otherwise the shadow will not show as expected. So, in addition to the styles in the proposed workaround, display: inline-block; should be added to the class . img-shadow .
Box-shadow inset will not work on image, you need to create a div and give box-shadow to that div and put image inside that div. You can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.
To shift a shadow to an inset shadow, all we really need to do is add a single word, “inset.”
CSS3 inset shadows don’t work on images, but there is a workaround,
Check here: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/
191
The workaround does not work for images with max-width: 100%; and height: auto; which are often used in fluid designs to make the images scale automatically until they reach their original width. To make the surrounding <a> (or whatever element) expand to cover all the content (the image) you need to add display: inline-block; to it, otherwise the shadow will not show as expected.
So, in addition to the styles in the proposed workaround, display: inline-block; should be added to the class .img-shadow.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
