Cara Membuat Efek Zoom Pada Gambar

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.

13 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat