I'm building a section for a website using css masonry. I've used it in a couple of other sections and it works fine so I've used similar code for this section. When I use one particular image I get this layout (which is what I want) -
However, when I use a different image for each .brick element I get this layout style, which is more traditional for masonry but not the one I want for this section -
Why would something as simple as the change of an image file change the layout of a whole section? I've tried to review the code and gone over it again and again but I'm struggling because it changes only when I change the image file. Here's my code -
index.html
<section>
<div class="staff">
<div class="masonry">
<div class="brick">
<img src="images/advertising.jpg">
<div class="details">
<span id="info">
<h3>Acacia Schticter</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<div class="brick">
<img src="images/graphic_design.jpg">
<div class="details">
<span id="info">
<h3>Catalina Tapia</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<div class="brick">
<img src="images/brand_identity.jpg">
<div class="details">
<span id="info">
<h3>Acacia Schticter</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<div class="brick">
<img src="images/brand_guide.jpg">
<div class="details">
<span id="info">
<h3>Catalina Tapia</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<div class="brick">
<img src="images/print.jpg">
<div class="details">
<span id="info">
<h3>Acacia Schticter</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<div class="brick">
<img src="images/creative_direction.jpg">
<div class="details">
<span id="info">
<h3>Catalina Tapia</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<div class="brick">
<img src="images/ed_design.jpg">
<div class="details">
<span id="info">
<h3>Acacia Schticter</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
<div class="brick">
<img src="images/other_stuff.jpg">
<div class="details">
<span id="info">
<h3>Catalina Tapia</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</div>
</div>
</div>
</div>
</section>
style.css
/* staff brick info */
.staff .details {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: 100%;
opacity: 0;
transition: .7s ease;
background-color: rgba(0,0,0,0.7);
}
.brick:hover .details {
opacity: 4;
}
.staff .details #info {
color: white;
position: absolute;
float: left;
top: 10%;
padding: 15px;
}
.staff #info p {
font-weight: lighter;
}
.brick:hover h2 {
opacity: 0;
}
.masonry { /* Masonry container */
column-count: 4;
}
.brick img {
width: 100%;
height: 100%;
}
body {
font-family: 'Gotham-Light', sans-serif !important;
margin: 0;
background: #fff;
}
.wrapper {
width: auto;
margin: 3em;
}
.staff {
width: auto;
margin: 3em;
}
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
vertical-align: bottom;
}
.brick {
display: inline-block;
margin: 0 0 1em;
width: auto;
opacity: .99;
position: relative;
cursor: pointer;
overflow: hidden;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* text hover effect */
.brick:before {
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
opacity: 0;
z-index: 2;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.brick img {
position: relative;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.brick .details span {
opacity: 0;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.brick .details #info {
line-height: 1.2;
font-weight: 500;
font-size: 15px;
}
.brick:focus:before,
.brick:focus span, .brick:hover:before,
.brick:hover span {
opacity: 1;
}
.brick:focus #info, .brick:hover #info {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
I want the layout to look identical to the first layout - all image elements exactly the same. I want to use the .masonry class as it works fine in other sections of the website and for RWD/ media queries.
