Cara Membuat Efek Transisi Pada Gambar

by | Mar 6, 2016 | Web Design | 0 comments

html_cssHalo, ketemu lagi dengan saya, pada kesempatan kali ini saya akan menjelaskan cara membuat efek transisi pada sebuah gambar, Baiklah langsung saja ikuti langkah-langkah berikut ini.

  1. Buka text editor nya.
  2. Kemudian ketikan perintah HTML seperti berikut

<body>

<img src=”Zedric.png”>

</body>

Sebelumnya harus menyiapkan gambar terlebih dahulu, setelah itu masukan gambar pada tag img.

  1. Kemudian lanjutkan untuk script CSS nya. Silahkan ketikan script berikut.

<title>Transisi Pada Gambar</title>

<style>

img{

transition:all 0.5s ease-out;

}

img:hover{

transform:scale(2,2);

}

</style>

</head>

Diletakan diantara tag head.

  1. Kalo sudah jangan lupa disimpan, kemudian lihat hasil nya pada browser.

Baiklah sampai disini penjelasan mengenai cara membuat efek transisi pada sebuah gambar.

Semoga bisa bermanfaat, sampai ketemu dilain kesempatan.