Image Montage

In this example below you will see how to do a Image Montage with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by trevorsaint, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright trevorsaint ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  
  <div class="gallery">
    
    <div class="image">
      <figure><img src="http://placehold.it/1368x666" alt=""></figure>
    </div>
    
    <div class="image image--two">
      <figure><img src="http://placehold.it/666x666" alt=""></figure>
      <figure><img src="http://placehold.it/666x666" alt=""></figure>
    </div>
    
    <div class="image image--three">
      <figure><img src="http://placehold.it/432x432" alt=""></figure>
      <figure><img src="http://placehold.it/432x432" alt=""></figure>
      <figure><img src="http://placehold.it/432x432" alt=""></figure>
    </div>
    
  </div>
  
</div>

/*Downloaded from https://www.codeseek.co/trevorsaint/image-montage-XRZJdp */
    .container {
  background: #efefef;
  width: 1368px;
  margin: auto;
}

img {
  vertical-align: top; // removes gap
}


.image {
  overflow: hidden;
  margin-bottom: 36px;
}


.image--two {
  margin-left: - 36px;
  
  figure {
    float: left;
    box-sizing: content-box;
    width: 50%;
    margin-left: 36px;
    max-width: 666px;
  }
  
}

.image--three {
  margin-left: - 36px;
  
  figure {
    float: left;
    box-sizing: content-box;
    width: 50%;
    margin-left: 36px;
    max-width: 432px;
  }
  
}


/*Downloaded from https://www.codeseek.co/trevorsaint/image-montage-XRZJdp */
    

Comments