Cara Membuat Rollover Image

Rollover merupakan sebuah efek pergantian atau transisi pada suatu objek ketika kursor diarahkan pada objek tersebut. Sebenarnya efek rollover kurang lebih sama dengan efek transisi atau transformasi pada gambar atau objek tertentu yang pernah saya posting sebelumnya. Silahkan anda baca pada CSS3 Transisi dan Transformasi. Ok lanjut gan bacanya....kali ini saya akan share cara membuat efek rollover pada gambar dan menambahkan view/ hide setelah mouse diarahkan pada gambar tersebut. Cara ini mungkin saja membantu saudara untuk membuat kolom tersendiri untuk menampilkan beberapa tulisan atau kutipan posting yang anda anggap penting. Ok langsung saja gan kita mulai cara pembuatannya. Ikuti langkah berikut ini.


Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Letakkan kode berikut di atas ]]></b:skin>

.rollover_img {height: 200px; width: 300px; background-image: url(http://css3.bradshawenterprises.com/images/Stones.jpg); background-position: top; -moz-border-radius:10px; -webkit-border-radius:10px; border:10px solid #ccc; font:12px normal Arial, Helvetica, sans-serif; line-height:18px; float:left; margin:0 10px 10px 0; }
.rollover_img a { color: #fff; width: 300px; height: 200px; display: block; text-decoration: none; }
.rollover_img a:hover { background:#000; opacity:.60; filter:alpha(opacity=60); }
.rollover_img a span { display: none; width: 280px; padding:5px; }
.rollover_img a:hover span { display: block; }

Simpan Template
Ketika anda berada pada halaman posting, masuk ke Edit HTML (sebelah kanan atas di samping compose). Masukkan kode berikut ke dalamnya atau letakkan pada bagian yang anda inginkan diantara artikel anda. 

<div class="rollover_img">
<a href="http://blogonol.blogspot.com" title="Percobaan"><span>Sebuah percobaan adalah coba-coba yang sedang anda coba lakukan. jadi sadarlah anda kalau percobaan itu merupakan suatu yang harus anda coba dan anda akan memulai percobaan itu setelah anda sadar untuk mencobanya. selamat mencoba </span></a></div>

Silahkan ganti tulisan berwarna biru dengan alamat blog atau web anda
Ganti juga tulisan merah dengan tulisan yang anda inginkan.
Silahkan terbitkan artikel anda dan lihat hasilnya. Bila cara ini tidak berhasil biasanya kode <span> dan kode </span> akan hilang. Anda hanya perlu mengembalikan dua kode tersebut pada letak awalnya. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"