Cara Membuat Efek Zoom Pada Gambar

13/01/2020    Risman Hakim    204     Website

Cara Membuat Efek Zoom Pada Gambar - Ditutorial DUMETSchool kali ini akan saya bagikan tutorial sederhana tentang efek yaitu Cara Membuat Efek Zoom Pada Gambar. Kalian pasti sudah bisa menebak ya efek yang akan ditampilkan nanti seperti apa. Pada pengaplikasian nya efek ini bisa kalian diterapkan pada banyak gambar atau galeri gambar. Buat kalian yang ingin mencoba membuat efek ini bisa kalian ikuti langkah - langkahnya berikut ini.

Sebelum memulai mengetikan sintak - sintaknya silahkan kalian persiapkan gambar bebes terlebih dahulu lalu kalian bisa membuat file index.html kemudian ketikan sintak HTMLnya berikut ini.

<body>
    <div class="container">
        <div class="img-galeri">
            <ul>
                <li><img src="img-1.jpg"></li>
                <li><img src="img-2.jpg"></li>
                <li><img src="img-3.jpg"></li>
                <li><img src="img-4.jpg"></li>
                <li><img src="img-5.jpg"></li>
                <li><img src="img-6.jpg"></li>
                <li><img src="img-7.jpg"></li>
                <li><img src="img-8.jpg"></li>
            </ul>
        </div>
    </div>
</body>

Silahkan kalian isikan gambarnya pada tag img seperti diatas, langkah selanjutnya adalah mengatur layout dan tentunya membuat efek zoom pada setiap gambarnya dengan sintak CSS berikut ini.

body {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: #E4DED0;
}
.container {
    width: 40%;
    margin: 40px auto;
}
div.img-galeri { margin-top: 30px; }
div.img-galeri ul {
    list-style-type: none;
    margin-left: 35px;
}
div.img-galeri ul li, div.img-galeri li img {
    -webkit-transition: all 0.1s ease-in-out;
      -moz-transition: all 0.1s ease-in-out;
      -o-transition: all 0.1s ease-in-out;
      transition: all 0.1s ease-in-out;
}
div.img-galeri ul li {
    position: relative;
    float: left;
    width: 130px;
    height: 130px;
    margin: 5px;
    padding: 5px;
    z-index: 0;
}
div.img-galeri ul li:hover { z-index: 5; }
div.img-galeri ul li img {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid #eaeaea;
    width: 130px;
    height: 130px;
}
div.img-galeri ul li img:hover {
    width: 200px;
    height: 200px;
    margin-top: -130px;
    margin-left: -130px;
    top: 65%;
    left: 65%;
}

Setelah semua sintak HTML dan CSS telah kalian ketikan, silahkan simpan kembali filenya kemudian kalian buka pada browser masing - masing untuk melihat hasil akhirnya. Maka akan terlihat efek zoom gambar seperti dibawah ini.

Cara Membuat Efek Zoom Pada Gambar

Baiklah, cukup sekian tutorial DUMETSchool tentang bagaimana Cara Membuat Efek Zoom Pada Gambar semoga tutorial HTML dan CSS ini bermanfaat selamat mencoba dan sampai jumpa ditutorial selanjutnya.

Web Design

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More