Cara Membuat Modal Gambar Responsive Dengan CSS Dan JavaScript Part2

Pada kesempatan kali ini saya akan melanjutkan penjelasan cara membuat modal gambar responsive dengan CSS dan JavaScript Part2. Jika sebelumnya teman-teman sudah membuat element modal html beserta dengan kode JavaScript, pada penjelasan ini teman-teman akan membuat style css untuk responsive gambar beserta dengan element modal gambar tersebut. Dan untuk membuat responsive suatu element di css, teman-teman bisa menggunakan css @media rule. Dimana fungsi css @media rule tersebut adalah untuk menentukan resolusi layar pengguna seperti desktop, tab dan phone. Dan untuk lanjutan tahapan dari penjelasan sebelumnya kalian bisa ikuti tahapan dibawah ini.

Berikut Tahapannya :

• Buka file index.html yang sebelumnya sudah dibuat
• Tambahkan kode css berikut, tepat didalam kode sebelum penutup </head> html. Berikut kodenya

<style>
body {font-family: Arial, Helvetica, sans-serif;}
#elementImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#elementImg:hover {opacity: 0.7;}
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.keluar {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.keluar:hover,
.keluar:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>

• Jika sudah save terlebih dahulu file index.html tersebut
• Dan lihat hasilnya di browser teman-teman.

Sampai disini penjelasan saya mengenai cara membuat modal gambar responsive dengan CSS dan JavaScript Part2, semoga bermanfaat.