Zoom Out Image Effect Responsive Blogger

Effect zoom out image / gambar dalam sebuah posting blog merupakan sebuah kreasi yang akan membuat image / gambar akan mengecil saat disorot oleh mouse. disini kami hadirkan tutorial sederhana tentang effect zoom out image.
Letakkan css style dibawah ini pada kerangka blog tepat diatas @media screen and pertama.

/* Zoom Out Image */

.sdz img{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;}

.sdz img:hover{

-webkit-transform:scale(0.4);

-moz-transform:scale(0.4);

-o-transform:scale(0.4);}

SAVE template.
Kemudian panggil css style yang sudah diletakkan pada kerangka template tadi pada entri posting.

<center>

<a class="sdz" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ZgQfXqhYMk0B7YFDJ-Lvw-wpYBfnqZbn4edIplr5m94b4TbNEz-46fZp51DwJPW9bOm2rHIg1InOpsTeKy5ta4UtoHYygx8L9QZw_CAosttgAMo_z7U7OonUnT6HWN7KSt32-YrTMLw/s1600/zoomout2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Zoom Image Effect Responsive Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ZgQfXqhYMk0B7YFDJ-Lvw-wpYBfnqZbn4edIplr5m94b4TbNEz-46fZp51DwJPW9bOm2rHIg1InOpsTeKy5ta4UtoHYygx8L9QZw_CAosttgAMo_z7U7OonUnT6HWN7KSt32-YrTMLw/s480/zoomout2.jpg" title="Zoom Image Effect Responsive Blogger" /></a>

</center>

Ganti url diatas dengan url image / gambar blog kamu.

Result

Demikian tutorial sederhana tentang menambah effect zoom out image / gambar pada entri posting blog, jika kurang dipahami silahkan tinggalkan pesan.