Membuat Efek Gambar Zoom Pada Blog

Sebuah demo, dimana sebuah gambar ketika dikik akan membesar alias zoom dengan effect. Coba anda klik gambarnya. dan trik ini tanpa memasukan beberapa kode pada Setelan Tema.

×

Cara membuatnya cukup mudah sih. Saya dapatkan cara ini di sebuah website tempat belajar saya w3school.com.
Langsung saja kita bahas caranya :
Pertama anda masuk ke dashboard blogger
Kemudian anda masuk ke Tema - Setelan HTML. Lalu masukan kode dibawah ini tepat diatas ]]></b:skin>

/* Gambar Zoom Effect by Marwanzaen */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 73%; /* Full width */
    height: 90%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 600px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 600px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.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)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 600px){
    .modal-content {
        width: 72%;
    }
}

Pada bagian media quares anda menambahkan beberapa ukuran yang anda ingin setting ketika memasuki beberapa layar misal pada smartphone berubah pada laptop atau pc. Anda tambahkan kode pada bagian kode ini

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 600px){
    .modal-content {
        width: 72%;
    }

Kemudian anda masukan kode dibawah dan anda bisa ganti beberapa kode url gambarnya. Cara ini sebenarnya untuk gambar yang memiliki url semua sih tapi untuk yang langsung upload gambar biasanya kan belum tau tuh link gambarnya jadi saran saya sebaiknya upload dulu gambar yang akan dibagikan kemana saja yg penting memiliki url. hehe.
Kode dibawah anda masukan ketika membuat sebuah postingan ya. Ingat!

<img alt="Al Qur'an" height="200" id="myImg" src="https://i.pinimg.com/736x/68/98/f7/6898f7c6fd96168b5bdf4cd8405e36e7--quran-quotes-quran-verses.jpg" width="300" />

<!-- The Modal -->
<div class="modal" id="myModal">
  <span class="close">×</span>
  <img class="modal-content" id="img01" />
  <div id="caption">
</div>

Yang diberi tanda itulah yang anda bisa rubah url dan caption untuk gambarnya. Sesuai yang anda inginkan.
Kemudian anda masukan Javascriptnya. masukan kode dibawah ini tepat dibawah </body>

<script>
var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
    modal.style.display = "none";
}
</script>

Pada bagian Javascript, saya mencoba tanpa memasangnya dan buktinya berhasil juga sih. Sampai disini anda klik Simpan. Dan coba buat sebuah artikel dengan memasukan kode diatas tersebut.

Terima kasih anda telah membaca artikel Membuat Efek Gambar Zoom Pada Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: