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

by

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.

example

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.

Answer

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.

Stroke

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.

Attribution
Source : Link , Question Author : Trendee , Answer Author : Marc Edwards

Leave a Comment