Skip to content Skip to sidebar Skip to footer

Cara Membuat Gallery Foto + LightBox Dengan HTML Dan CSS3

cara membuat galeri slide di html dan css - Hallo teman-teman kembali lagi dengan saya suryapero dalam pembahasa lain yaitu tentang programmer website. saya akan membagikan cara membuat gallery foto yang keren buat kamu. tutorial ini saya dapatkan di Web Programming Unpas.

Gallery foto adalah foto yang berisi kenangan kamu berupa sebuat foto, tetapi disimpan di website atau blog. tutorial ini bisa kamu terapkan di blog atau website kamu. kamu bisa melihat data HTML dan CSS

Fitur-Fitur

  • Slide Image
  • Tombol Close
  • Animation
  • Dll
1.Salin HTML Dibawah ini, letakkan di sorce code kamu.

<!-- WWW.SURYAPERO.COM -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gallery Foto</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- WWW.SURYAPERO.COM -->
</head>
<body>
    <h1>Gallery Foto</h1>
    <!-- WWW.SURYAPERO.COM -->
    <div class="container">
        <ul class="gallery">
            <li>
                <a href="#gambar-1">
                    <img src="img/thumbs/1.png" alt="Sagiri">
                    <span>Sagiri</span>
                </a>

                <div class="overlay" id="gambar-1">
                    <a href="#" class="close">X Close</a>
                    <a href="#gambar-4" class="prev">prev</a>
                    <img src="img/full/1.png" alt="">
                    <a href="#gambar-2" class="next">next</a>
                </div>
            
            </li>
            <li>
                <a href="#gambar-2">
                    <img src="img/thumbs/2.png" alt="Ikazuki">
                    <span>Ikazuki</span>
                </a>

                <div class="overlay" id="gambar-2">
                    <a href="#" class="close">X Close</a>
                    <a href="#gambar-1" class="prev">prev</a>
                    <img src="img/full/Yoi.png" alt="">
                    <a href="#gambar-3" class="next">next</a>
                </div>
            </li>
            <li>
                <a href="#gambar-3">
                    <img src="img/thumbs/3.png" alt="Sagiri">
                    <span>Sagiri</span>
                </a>

                <div class="overlay" id="gambar-3">
                    <a href="#" class="close">X Close</a>
                    <a href="#gambar-2" class="prev">prev</a>
                    <img src="img/full/3.png" alt="">
                    <a href="#gambar-4" class="next">next</a>
                </div>
            </li>
            <li>
                <a href="#gambar-4">
                    <img src="img/thumbs/4.png" alt="Sagiri">
                    <span>Sagiri</span>
                </a>

                <div class="overlay" id="gambar-4">
                    <a href="#" class="close">X Close</a>
                    <a href="#gambar-3" class="prev">prev</a>
                    <img src="img/full/4.png" alt="">
                    <a href="#gambar-1" class="next">next</a>
                </div>
            </li>

            <div class="clear"></div>

        </ul>
    </div>
    <!-- WWW.SURYAPERO.COM -->
</body>
</html>
2.Salin atau copy source code ini. letakkan di style css kamu.
font*/
/*WWW.SURYAPERO.COM*/
@font-face {
    font-family: 'bebas_neue_regularregular';
    src: url('../fonts/bebasneue_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*Sytle Utama*/
/*WWW.SURYAPERO.COM*/
body {
    font: 18px/36px 'bebas_neue_regularregular';
    background-image: url(../img/air.jpg);
    background-attachment: fixed;
    background-size: cover;
}

h1 {
    font-size: 80px;
    margin: 50px 0;
    text-align: center;
    text-shadow: 2px 2px 3px rgba(0,0,0,.5);
}

.container {
    width: 600px;
    background-color: white;
    margin: auto;
    padding: 30px;
    box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
    border-radius: 5px;
}

.gallery li {
    width: 120px;
    height: 120px;
    /*overflow: hidden;*/
    border: 5px solid #666;
    /*display: inline-block;*/
    float: left;
    margin-right: 17px;
    position: relative;
}

.gallery li img,
.gallery li span,
.gallery li {
    border-radius: 50%;
}

.gallery li span {
    display: block;
    width: 120px;
    height: 120px;
    background-color: rgba(200,200,200,.5);
    position: absolute;
    top:0;
    text-align: center;
    line-height: 120px;
    color: #333;
    text-shadow: 2px 1px 2px #ddd;
    opacity: 0;
    transform: scale(0) rotate(0);
    transition: .5s;
}

.gallery li a:hover span {
    opacity: 1;
    transform: scale(1) rotate(360deg);
}

.clear {
    clear: both;
}


/*Overlay*/
/*WWW.SURYAPERO.COM*/
.overlay {
    width: 0;
    height: 0;
    overflow: hidden;
    position: fixed;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0);
    z-index: 1;
    transition: .6s;
    text-align: center;
    padding:100px 0;
}

.overlay:target {
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.7);
}

.overlay img {
    max-height: 100%;
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.8));
}

.overlay:target img {
    animation: fadeSaja 1s;
}

.overlay .close {
    position: absolute;
    left: 40%;
    z-index: 2;
    color: white;
    text-decoration: none;
    background-color: black;
    border: 1px solid white;
    line-height: 15px;
    padding: 5px;
    opacity: 0;
}

.overlay:target .close {
    animation: slideDownFade .5s .5s forwards;
}

.overlay:target .next,
.overlay:target .prev {
    animation: fadeSaja .5s .5s forwards;
}

/*Navigasi*/
.next, .prev {
    width: 57px;
    height: 93px;
    background-image: url(../img/kanan.png);
    position: absolute;
    text-indent: -9999px;
    top: 40%;
    margin-left: 50px;
    opacity: 0;
}

.prev {
    background-image: url(../img/kiri.png);
    margin-left: -100px;
}

/*Animation*/
/*WWW.SURYAPERO.COM*/
@keyframes fadeSaja {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes zoomDanFade {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity:1;
    }
}

@keyframes slideDownFade {
    0% {
        opacity: 0;
        margin-top: -20px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
                        /*WWW.SURYAPERO.COM

3. Simpan Theme Atau themplate kamu dan lihat hasilnya.

Demikianlah tutorial membuat gallery gambar dengan HTML dan CSS , semoga bermanfaat bagi kamu. pastikan praktekan juga agar tambah mengerti. support blog ini dengan bantu membagikan artikel blog ini agar lebih luas pembahasan dan ilmunya.
Surya
Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

1 comment for "Cara Membuat Gallery Foto + LightBox Dengan HTML Dan CSS3"

  1. whoah this weblog is great i like studying your articles. Keep up the great paintings! You already know, a lot of people are searching around for this info, you could help them greatly. design firms los angeles

    ReplyDelete