Membuat efek Zoom pada HTML dengan CSS

Yops, setelah lama Saya tidak membuat postingan lagi, kali ini saya kembali dengan membawa sebuah tutorial CSS dasar, yaps kali ini saya akan coba membuat efek zoom pada HTML dengan menggunakan CSS, oke langsung saja kita coba membuat efek Zoom ini, tapi pastikan kalian menyiapkan text editor kalian, jika sudah coba kalian copy saja source code di bawah ini.

Untuk index nya copy saja code berikut dan beri nama "index.html tanpa tanda kutip

<!DOCTYPE html>

<html>

<head>

<title>Efek zoom | Malming.web.id</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>Membuat efek Zoom | Malming.web.id</h1>

<div class="wrapper">

<div class="zoom">

<div class="box">

<img src="http://www.suratkabar.id/wp-content/uploads/2016/05/bentuk-planet-bumi-bulat.jpg">

</div>

</div>

</div>

<p>&nbsp</p>

<div class="footer">

Copyright <a href="http://malming.web.id/">Malming.web.id</a>

</div>

</body>

</html>

Untuk CSS nya copy saja code berikut dan beri nama "style.css" (sesuaikan saja seperti inputan pada html nya)

body {

background-color: #95A5A6;

}

h1 {

text-align: center;

}

.box img {

-webkit-transition: 0.5s ease;

transition: 0.5s ease;

width: 700px;

}

.zoom:hover .box img {

-webkit-transform: scale(1.08);

transform: scale(1.08);

}

.wrapper {

width: 700px;

margin: auto;

}

.footer {

text-align: center;

}

.footer a {

text-decoration: none;

}

Nah code yang paling berpengaruh pada efek zoom ini adalah di code berikut

.box img {

-webkit-transition: 0.5s ease;

transition: 0.5s ease;

width: 700px;

}

.zoom:hover .box img {

-webkit-transform: scale(1.08);

transform: scale(1.08);

}

di sini kita menggunakan efek transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain. Fungsi dari Efek Transisi ini adalah untuk membuat animasi pada hover, dimana saat kursor kita arahkan pada elemen yang mempunyai fungsi hover maka elemen tersebut akan secara bertahap berubah gaya.

Nah jika kalian ingin tau seperti apa efeknya, silahkan kalian copy saja code di atas dan coba kalian praktekan atau kembangkan sendiri.

Nah mungkin cukup sekiyan dari saya kali ini, terimakasih. Wassallam
gambar : http://www.suratkabar.id/wp-content/uploads/2016/05/bentuk-planet-bumi-bulat.jpg

Membuat efek Zoom pada HTML dengan CSS

Share this