Adding a box shadow to a horizontal image carousel

Question

I've tried to add the box-shadow to the img, the spaces between the images end up with a shadow even though I'm only setting the horizontal offset.

*{
  box-sizing: border-box;
}

html, body{
  width: 100%;
}

body{
  margin:0 auto;
}

.wrapper{
  display: flex;
  height: 600px;
  align-items: center;
}

img {
  min-height: 400px;
  max-height: 420px;
  padding-right: 2em;
  padding-left: 1em;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

<body>
<div class="wrapper">
  <div class="img">
    <img src="tree.jpg">
    </div>
    <img src="succulent.jpg">
    <img src="car.jpg">
    <img src="road.jpg">
    <img src="over.jpg">
    <img src="streetphoto.jpg">
    <imgs src="yep.jpg">
</div>
</body>

So what's your actual question? Is the horizontal box shadow not desired? Do you want a vertical shadow? Please update your question to add some more context (as was recommended to you when creating this question). It would help to clearly state what you want, and what you don't want. I'd also recommend reviewing [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and taking the [**tour of the site**](http://stackoverflow.com/tour). — Obsidian Age, Aug 29 '18 at 03:33
Welcome! When I put your code into a stack snippet (which also provides highlighting), I noticed that you close your div after `tree.jpg`, which basically renders useless the last closing `` at the end of the code. Is that intentional? — GolezTrol, Aug 29 '18 at 04:02
Related, possibly duplicate: [drop shadow only bottom css3](https://stackoverflow.com/questions/5460129/drop-shadow-only-bottom-css3) — GolezTrol, Aug 29 '18 at 04:11
Actual duplicate, although it's closed as duplicate of the other. :p [CSS Box Shadow - Top and Bottom Only](https://stackoverflow.com/questions/6671375/css-box-shadow-top-and-bottom-only) — GolezTrol, Aug 29 '18 at 04:13
Alternatively, you could give the wrapping `div` element the shadow, instead of each individual `img` — janniks, Aug 29 '18 at 07:48

Fish · Accepted Answer · 2018-08-29T09:36:06.173

I tried to figure out, what you want to do and i guess that you just need to use margins instead of paddings. Paddings change the size of the object to which they belong. Margins don't do that.

  img {
    min-height: 400px;
    max-height: 420px;
    margin-right: 2em;
    margin-left: 1em;
    box-shadow:  0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

If you use this, there will be no distance between the images and the shadows, but between the images.

Adding a box shadow to a horizontal image carousel

1 Answers1