Gambar membesar apabila di hover menggunakan CSS

Tutorial kali ini adalah cara membuat gambar membesar saat di hover dengan menggunakan CSS. Untuk anda yang tak faham lagi gambar tu membesar macam mana boleh tengok demo di bawah

Demo

Pemasangan

1.Masuk ke Blogger

2.Pegi ke Theme dan klik Edit HTML

3. Copy css di bawah ini kemudian paste di atas  </b:skin>

/*GROW*/
.grow img {
  height: 300px;
  width: 300px;
  border-radius: 50px;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.grow img:hover {
  width: 400px;
  height: 400px;
}
/*GROW*/

4. Kemudian copy class di bawah dan letakkan di blog post/widget atau sebagainya

<div class="grow pic">
  <img src="https://pbs.twimg.com/profile_images/647595331073368065/GA0GzLKQ.jpg" alt="JungYerin">
<h2>This is about Jung Yerin</span></h2>

* Link yang berwarna hijau tu gantikan dengan URL gambar yang anda inginkan
* Tukar dengan ayat yang nak ditulis

5.Save theme dan selesai!

Itu sahaja untuk tutorial kali ini . Terima kasih kerana sudi membaca