How can I create a generic display that looks appealing with a wide variety of images?

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.


The code:

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

Leave a Comment