Cara Membuat Galeri Foto Dengan HTML5 dan CSS3

Cara Membuat Galeri Foto Dengan HTML5 dan CSS3

Jika anda sedang atau akan membangun web atau cuma template yang kontennya cuma foto dengan sedikit penjelasan maka anda wajib membuat web yang memiliki galeri yang biasanya dalam galeri tersebut terdapat banyak foto atau gambar beserta biasanya dilengkapi dengan preview gambar, dropdown atau slider/slideshow gambar.

Kali ini kita hanya membuat galeri foto dengan menggunakan html5 dan css5 secara sederhana, cara pembuatannya, buatkanlah sebuah file baru dengan nama index.html dan gunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Gallery Images</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

  <div class="responsive">
    <div class="gallery">
      <a href="images/1.jpg" target="_blank">
        <img src="images/1.jpg" alt="1"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/2.jpg" target="_blank">
        <img src="images/2.jpg" alt="2"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/3.jpg" target="_blank">
        <img src="images/3.jpg" alt="3"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/4.jpg" target="_blank">
        <img src="images/4.jpg" alt="4"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/5.jpg" target="_blank">
        <img src="images/5.jpg" alt="5"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/6.jpg" target="_blank">
        <img src="images/6.jpg" alt="6"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/1.jpg" target="_blank">
        <img src="images/1.jpg" alt="1"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/2.jpg" target="_blank">
        <img src="images/2.jpg" alt="2"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>

  <div class="clearfix"></div>
<p><br/></p>


  <div class="imgdropdown">
    <img src="images/1.jpg" width="200"/>
    <div class="wrapimg">
      <img src="images/1.jpg" class="imgdown">
      <div class="descdown">This Description Here</div>
    </div>
  </div>
  <div class="imgdropdown">
    <img src="images/2.jpg" width="200"/>
    <div class="wrapimg">
      <img src="images/2.jpg" class="imgdown">
      <div class="descdown">This Description Here</div>
    </div>
  </div>

  <p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>

</body>
</html>

Selanjutnya buatkanlah sebuah file css dan beri nama style.css dan simpan bersamaan dengan index.html, file css merupakan pengayaan dan gunakan kode dibawah ini.

body{
  font-family:helvetica, sans-serif, arial;
  font-size: 12pt;
}
*{
  box-sizing:border-box;
}
.gallery{
  border:1px solid #ccc;
}
.gallery:hover{
  border:1px solid #999;
}
.gallery img{
  width: 100%;
  height: 200px;
}
.gallery .desc{
  text-align: center;
  padding: 15px;
}
.responsive{
  padding: 6px;
  float: left;
  width: 24.99999%;
}
@media screen and (max-width:800px){
  .responsive{
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media screen and (max-width:485px){
  .responsive{
    width: 100%;
  }
}
.clearfix:after{
  content: " ";
  display: table;
  clear: both;
}
.imgdropdown{
  position: relative;
  display: inline-block;
}
.wrapimg{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.imgdropdown:hover .wrapimg{
  display: block;
}
.imgdown{
  width: 600px;
  height: 400px;
}
.descdown{
  padding: 15px;
  text-align: center;
}

 

Tags: , , , ,