I feel like this looks ugly. The box shadow above the image blends really well with some images – generally with images that have a lot of color or are white – but with others it looks horrible.
box-shadow: 0 -2px 6px -2px rgba(0, 0, 0, .2); border-top: 1px solid rgba(0, 0, 0, 0.2);
What would you guys recommend to fix this issue? As I can’t exactly restrict what images are uploaded to the website, I would rather make it so everything looks great.
If you can set things up so that there’s a 1 pixel transparent black stroke that’s added to the interior of the image area, you mind find it works better with a wide variety of images.
I used black at 40% opacity for the stroke in the examples above.
I don’t know the best way to do this using CSS. Maybe a second div that’s 1px smaller on all sides, with a border? There’s probably quite a few methods you could use.
Source : Link , Question Author : Trendee , Answer Author : Marc Edwards