Zoom Image Pada Posting Dengan CSS Transition

Ada banyak cara untuk membuat zoom image. Bisa menggunakan cara ini atau dengan cara yang akan dibahas di bawah ini. Zoom image ini selain untuk menghemat tempat, juga bisa untuk membuat blog menjadi lebih menarik.
Seperti biasa :

1. login ke blog , klik rancangan.
2. masuk ke edit html cari kode .post img {  .... }
3. tambahkan kode css transition dibawah ini di antara tanda kurung diatas.

-o-transition: all 0.5s;<br /> -moz-transition: all 0.5s;<br /> -webkit-transition: all 0.5s;

Setelah itu kopi kode ini di bawah kode diatas (ingat kopi kode ini diluar tanda kurung kode pada langkah 2. Tepantya setelah tanda }

.post img:hover {<br /> -o-transition: all 0.3s;<br /> -moz-transition: all 0.3s;<br /> -webkit-transition: all 0.3s;<br /> -moz-transform: scale(2.5);<br /> -o-transform: scale(2.5);<br /> -webkit-transform: scale(2.5);<br /> background-color: #000000;<br /> padding: 4px 4px 4px 4px;<br /> border: 5px solid #414141;<br /> }

untuk demo silahkan dicoba sendiri karena di blog ini sudah terhapus saat ganti template

Tulisan Terkait :

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan