Widodo

Cara Cepat Membuat Galery Gambar Efek Hover

Membuat Galery GambarAssalamualaikum Wr Wb

Cara Cepat Membuat Galery Gambar Efek Hover : Hai teman-teman s-widodo.com akan memberikan ilmu lagi nih, apasih itu pasti pada kepo, sebenarnya tutorial yang akan kita bahas ini udah pernah kita buat hanya konsepnya aja yang berbeda dan tutorial ini juga reques dari mas Rizky Mahrizal selaku Penulis di web kami juga dan mudah-mudahan sih pesenan mas rizky ini kagak salah apa yang saya buat ini yaitu membuat galery semacam portofolio 3 galery atau 4 galery tetapi yang saya bikin ini hanya 3 galery saja untuk itu anda nantinya bisa pelajari sendiri setelah saya berikan tutorial ini.

Mungkin untuk tutorial-tutorial yang mengenai galery anda bisa membuka artikel  sebelumnya yaitu  Membuat Caption image animation zoom dan galery inipun hampir sama dengan yang kami bahas saat ini.

Mungkin langsung saja kita pelajarin bersama-sama, jangan lupa persiapkan senjata anda masing2... wkwkwk

Berikut tutorialnya :

1. Silahkan buat Halaman baru  dilocalhost dengan format CSS jangan lupa sebelumnnya buatlah folder, jika di blog  anda tinggal copy saja kode cssnya, Silahkan masukkan Kode CSS di bawah ini

.box-gambar-utama {min-height:300px; margin-bottom:20px;width:29.5%;float:left; margin:1.8%}
.box-gambar { margin: 0;
    padding: 0;
    height:250px;
    position: relative;
    display: block;
    overflow: hidden;}


.box-gambar img {width:100%; height:250px;}
.images-hover { opacity:0;
 background:rgba(60,88,248,0.7) ;
  top: 0;
  display: none;
  height:300px;
  position: absolute;
  transition: height 100ms ease 0s;
  width: 100%;
  display: block;}

a .zoom {color:#333; text-decoration:none;}
.zoom { background:url(icon-zoom.png) no-repeat center center;
opacity:0; 
bottom:0; 
height:30px;
display: none;
position: absolute; 
border: 0px none;
border-radius:50%; line-height:30px;
color:#999999; 
text-decoration:none; width:60px; height:60px; border:solid 4px #ffffff; font-weight:bold;
font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center;

}
.descripsi { margin:0px; padding:5px;display:table;width:100%; font-family:Arial, Helvetica, sans-serif}
.descripsi h3 {font-size:17px; margin:auto; padding:4px;font-weight:2000; color:#666666;
				text-align:center;}

Penjelasan

.box-gambar-utama : yaitu menentukan Container/box utama pada galery disini saya menggunakan persen untuk lebarnya

.box-gambar : yaitu untuk content gambarnya

.images-hover : yang nantinya ini yang akan dibuat effek hover pada gambar

.zoom : Untuk membuat Button atau icon yang ada didalam hover gambar (images-hover)

.descripsi : untuk deskripsi sendiri ini saya gunakan untuk membuat judul gambar yang ada dibwah gambar

2. Setelah itu anda tinggal membuat effek saat hover saat mouse menyentuh gambar CSSnya seperti dibwah ini

.box-gambar-utama:hover .images-hover {
  display:block; opacity:100;
  height:100%;
}

.box-gambar-utama:hover .zoom { margin:auto;
left:0;right:0;margin-left:auto;margin-right:auto;
  display:block; opacity:100;
  margin-bottom:25%;

}

Penjelasan :

.box-gambar-utama:hover : Jika box-gambar utama disorot Mouse maka images-hover akan tampil

.box-gambar-utama:hover .zoom : Jika box-gambar utama disorot maka Mouse Button/Icon zoom akan tampil

Untuk iconnya disini kami menggunakan gambar PNG

3. Untuk kesluruhan CSS diatas seperti ini :

.box-gambar-utama {min-height:300px; margin-bottom:20px;width:29.5%;float:left; margin:1.8%}
.box-gambar { margin: 0;
    padding: 0;
    height:250px;
    position: relative;
    display: block;
    overflow: hidden;}


.box-gambar img {width:100%; height:250px;}
.images-hover { opacity:0;
 background:rgba(60,88,248,0.7) ;
  top: 0;
  display: none;
  height:300px;
  position: absolute;
  transition: height 100ms ease 0s;
  width: 100%;
  display: block;}

a .zoom {color:#333; text-decoration:none;}
.zoom { background:url(icon-zoom.png) no-repeat center center;
opacity:0; 
bottom:0; 
height:30px;
display: none;
position: absolute; 
border: 0px none;
border-radius:50%; line-height:30px;
color:#999999; 
text-decoration:none; width:60px; height:60px; border:solid 4px #ffffff; font-weight:bold;
font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center;

}
.descripsi { margin:0px; padding:5px;display:table;width:100%; font-family:Arial, Helvetica, sans-serif}
.descripsi h3 {font-size:17px; margin:auto; padding:4px;font-weight:2000; color:#666666;
				text-align:center;}

.box-gambar-utama:hover .images-hover {
  display:block; opacity:100;
  height:100%;
}

.box-gambar-utama:hover .zoom { margin:auto;
left:0;right:0;margin-left:auto;margin-right:auto;
  display:block; opacity:100;
  margin-bottom:25%;

}

@media (max-width:1024px){ 
.box-gambar-utama:hover .zoom { margin-bottom:30%;}
}

@media (max-width:880px){ 
.box-gambar-utama {min-height:300px; margin-bottom:20px;width:45%;float:left; margin:1.3%}
.box-gambar-utama:hover .zoom { margin-bottom:30%;}
}

@media (max-width:480px){ 
.box-gambar-utama {min-height:300px; margin-bottom:20px;width:100%; margin:auto}
.box-gambar-utama:hover .zoom { margin-bottom:25%;}
}

4. Sekarang anda buat Document baru dengan format HTML dan jangan lupa simpan didalam 1 folder

5. Setelah itu anda panggil file css yang tadi kita buat contohnya seperti dibwah ini

<link rel="stylesheet" type="text/css" href="style.css" />

6. Sekarang tinggal panggil Fungsi HTML atau class nya seperti dibwah ini

<div class="box-gambar-utama">
<div class="box-gambar">
<img src="pic02.jpg">
<div class="images-hover">
</div>
<a class="zoom" href="#"></a>
</div>

<div class="descripsi">
<h3> Lorem Ipsum</h3>
</div>
</div>

7. Selesai....

Silahkan tes di browser kalian masing-masing...

Happy Coding....

Kami juga menydaakan source Codenya diwah ini

 

Jika tautan rusak atau tidak bisa dibuka harap lapor kepada kami, kami akan segera memperbaikinya

Download



Artikel Terkait

0 Komentar