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>

Answer 1

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

Question

1 answers

solution1
1 ACCPTED 2018-08-29 09:30:01

Adding a box shadow to a horizontal image carousel

Question

1 answers

solution1 1 ACCPTED 2018-08-29 09:30:01

solution1
1 ACCPTED 2018-08-29 09:30:01