Cara Menambah Efek Hover Berputar dan Zoom 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

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.