I am struggling to arrange images in rows, but I'm facing unexpected outcomes. The images only break to a new line when the page is filled. I attempted to use overflow:hidden, however, the expanding images end up hidden under white space. I can't determine if there's an issue with my code or if I'm implementing it incorrectly. Below is a snippet of my poorly drawn image and the accompanying code.
figure {
width: 150px;
float: left;
margin: 0 20px 0 0;
background: white;
border: 10px solid white;
-webkit-box-shadow: 0 3px 10px #ccc;
-moz-box-shadow: 0 3px 10px #ccc;
-webkit-transition: all 0.7s ease;
-moz-transition: all 1s ease;
position: relative;
}
figure img {
width: 100%;
}
figure:hover {
-webkit-box-shadow: 0 3px 10px #666;
-moz-box-shadow: 0 3px 10px #666;
}
figure.tall:focus {
outline: none;
-webkit-transform: scale(3.0);
-moz-transform: scale(3.0);
-webkit-box-shadow: 0 3px 10px #666;
-moz-box-shadow: 0 3px 10px #666;
z-index: 9999;
}<section class="image-gallery">
<div class="wrapper">
<figure class="tall" tabindex=1>
<img src="Gallery/image.jpg" alt="" />
</figure>
<figure class="tall" tabindex=2>
<img src="Gallery/image.jpg" alt="" />
</figure>
</div>
<div class="wrapper">
<figure class="tall" tabindex=3>
<img src="Gallery/image.jpg" alt="" />
</figure>
<figure class="tall" tabindex=4>
<img src="Gallery/image.jpg" alt="" />
</figure>
</div>
</section>Any assistance or recommendations would be greatly appreciated.
P.S. My apologies for my lack of artistic skills.