How to add a box-shadow to a containing div?

Question

So here's where I'm at: https://codepen.io/YellaChevy/pen/odYxrg

Excuse my markup I'm super new, what I am trying to figure out is how to add the one overall box-shadow property to "dogBlock" and "infoBlock"? I feel it has something to do with my html structure but not sure how to tweak it to make it look like this : https://www.pages.xyz/

I can see from the pages.xyz site that they contain multiple divs but have the one overal box-shadow, does that makes sense?

Thank you in advance!

<section>
<div class="container">

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_1.jpg"></a>
    </div>

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_2.jpg"></a>
    </div>

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_3.jpg"></a>
    </div>

</div>
<div class="container">

    <div class="infoBlock">
        <h2>Sharpe</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Sharpe</a>
    </div>

    <div class="infoBlock">
        <h2>Bonnie, Mya + Roo</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet the sisters</a>
    </div>

    <div class="infoBlock">
        <h2>Willow</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Willow</a>
    </div>

</div>

 .container {
max-width: 1200px;
overflow: hidden;
margin: 0 auto;}

.boxShadow {
box-shadow: 0 10px 6px -6px rgba(255, 255, 255, 0.2);}


.dogBlock {
width:33.333%;
float: left;
margin-top: 80px;}

.infoBlock {
color:#000;
width:33.333%;
float:left;
background-color:rgba(236,236,236,1.00);
padding: 20px;
margin-bottom: 280px;}

Answer 1

You would have to wrap the image part and text of every item into individual div to get the result you are looking for. Try this code.

<section>
    <div class="container">
        <div clss="boxwrap">
        <div class="dogBlock">
            <a href="#"><img src="Assets/image_1.jpg"></a>
      <div class="infoBlock">
        <h2>Sharpe</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Sharpe</a>
      </div>
        </div>

        <div class="dogBlock">
            <a href="#"><img src="Assets/image_2.jpg"></a>
      <div class="infoBlock">
        <h2>Bonnie, Mya + Roo</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet the sisters</a>
      </div>
        </div>

        <div class="dogBlock">
            <a href="#"><img src="Assets/image_3.jpg"></a>
      <div class="infoBlock">
        <h2>Willow</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Willow</a>
      </div>
        </div>
      <div class="clear"></div>
    </div>
    </div>
</section>

.container {
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
}
.boxwrap {
  margin-left: -15px;
  margin-right: -15px;
}


.dogBlock {
    width:calc(33.333% - 30px);
    float: left;
    margin-top: 80px;
  margin-left: 15px;
  margin-right: 15px;
  box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.infoBlock {
    color:#000;
    background-color:rgba(236,236,236,1.00);
    padding: 20px;
    margin-bottom: 280px;
}
.clear {
  clear: both;
}