Cara Menambah Efek Hover Berputar dan Zom Pada Foto

Cara Menambah Efek Hover Berputar dan Zom Pada Foto

Cara Menambah Efek Hover Berputar dan Zom Pada Foto
Hi Web Developer! hari ini guru design akan berbagi tutorial tentang caranya menambahkan efek hover zoom in zoom out dan berputar pada foto.
Tanpa basa-basi lagi marilah kita langsung ke TKP.

HTML

<div id="efek">
<img src="fotoanda.jpg"/>
</div>

CSS

#efek img {
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
#efek img:hover {
    -o-transform: scale(2) rotate(360deg);
    -moz-transform: scale(2) rotate(360deg);
    -webkit-transform: scale(2) rotate(360deg);
    transform: scale(2) rotate(360deg);
}

Demo


Cara Menambah Efek Hover Berputar dan Zom Pada Foto
Silahkan dipraktekkan sendiri di rumah, semoga berhasil

Jika artikel ini bermanfaat silahkan share ke teman-teman anda Terima kasih. jika ada yang ingin ditanyakan silakan Tulis di komentar.

Related Post

Tidak ada komentar