Grid Gallery Masonry Responsive CSS - Tutorial Website | Tutorial PHP & MYSQL | Boostsrap | Ajax Javascript

Dikesempatan ini WriteCode tidak bosannya berbagi dan belajar untuk membuat tutorial yang sederhana ini, WriteCode akan menulis tutorial cara membuat Grid Gallery Masonry Responsive CSS, membuat galeri didalam sebuah website kadang kita kebingungan mencari tampilan galeri yang menarik dan sesuai dengan keinginan kita, nyari dimbah google kadang nemu kadang ngak eh ketemu disini ngumpet ya...slow. Langsung saja tanpa panjang dan lebar kita langsung menuju TKP jadi ingat OVJ hehehe....

Step 1

Silakan anda copas css dibawah ini kedalam lembar kerja anda :

#masonry {
  column-count: 2;
  column-gap: 1em;
}

@media(min-width: 30em) {
  #masonry {
    column-count: 3;
    column-gap: 1em;
  }
}

@media(min-width: 40em) {
  #masonry {
    column-count: 4;
    column-gap: 1em;
  }
}

@media(min-width: 60em) {
  #masonry {
    column-count: 5;
    column-gap: 1em;
  }
}

@media(min-width: 75em) {
  #masonry {
    column-count: 6;
    column-gap: 1em;
  }
}

.item {
  background-color: none;
  display: inline-block;
  margin: 0 0 1em 0;
  width: 100%;
  cursor: pointer;
}

.item img {
  max-width: 100%;
  height: auto;
  width: 100%;
  margin-bottom: -4px;
  
  /*idk why but this fix stuff*/
}

.item.active {
  animation-name: active-in;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.item.active:before {
  content: "+";
  transform: rotate(45deg);
  font-size: 48px;
  color: white;
  position: absolute;
  top: 20px;
  right: 20px;
  background-color:rgba(0,0,0,0.85);
  border-radius: 50%;
  width:48px;
  height:48px;
  text-align:center;
  line-height:48px;
  z-index:12;
}

.item.active img {
  animation-name: active-in-img;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}


@keyframes active-in {
  0% {
    opacity:1;
    background-color:white;
  }
  
  50% {
    opacity:0;
    background-color:rgba(0,0,0,0.90);
  }
  
  100% {
    opacity: 1;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.90);
  }
}

@keyframes active-in-img {
  0% {
    opacity:1;
    transform:translate(0%, 0%);
    top: 0;
    left: 0;
    max-width: 100%;
  }
  49% {
    opacity:0;
    transform: translate(0%, -50%);
  }
  50% {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  100% {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  width: auto;
  max-height: 95vh;
  opacity:1;
  }
}

Step 2

Copas Lagi untuk javascriptnya dibawah ini :

$('.item').click(function() {
  $(this).toggleClass('active');
});

Step 3

Untuk script HTMLnya dibawah ini :

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="well text-center"><h2>Full Responsive CSS Masonry Grid Gallery Or Blog</h2></div>
    </div>
  </div>
  <div class="container">
  <div id="masonry">
    <div class="item">
      <img src="http://placehold.it/1200x1200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x300" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x250" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x320" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x300" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x250" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x320" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x300" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x250" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x320" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x300" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x250" alt="" />
    </div>
  </div>
</div>
</div>

Untuk Bootstrapnya silakan anda download di link resminya, 3 langkah mudah membuat Grid Gallery Masonry Responsive CSS, bila ada kekurangan didalam koding harap dimaklum silakan dikembangkan dan dipelajari, semoga bermanfaat untuk anda.

Baca Juga : CSS Image Galeri Responsive