CSS image hover effects zoom out

CSS image hover effects zoom out

CSS image hover effects zoom out adalah efek hover gambar apabila di sorot kursor, gambar yang semula lebih besar, menjadi lebih kecil.
ini contoh css & htmlnya.

<style type="text/css">
.hover03 img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover03 img:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
</style>

<div class="hover03 img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ukuy_Wm2jIlwC5nImvTO2gRvO2vDgc42RIpi-foZZXQCqA6P7QyHaYoCltZXAzVa-OkFEMdlJ6wXtuZzIW1F-FQsh28002Mr6L1P1vi5WUiFgdr5Sh0jg6FwOcGZlxnciHfaV0uKZIGJ/s320/54c83f83ab8d79a55bc686dde47cc4b3.jpg" />
</div>

Selamat mencoba.