Displaying text on images with rgba background & CSS3 transition

Selama ini jika anda ingin menampilkan teks pada sebuah image, cara yang bisa digunakan adalah dengan membuat caption. Menampilkan caption dapat dilakukan dengan memanfaatkan fitur yang telah disediakan blogger atau yang lain dengan cara klik Add Caption. Sekalipun sangat mudah dilakukan, tetapi ternyata amat jarang blogger yang memanfaatkan fitur Add Caption. Beberapa hal mungkin menjadi pertimbangan, seperti misalnya keterangan tentang gambar/image dapat disampaikan langsung melalui teks posting, melalui tooltip atau bahkan beberapa menganggap penambahan caption justru mengganggu pola penataan blog.

Ada sebuah solusi lain untuk emnampilkan teks image. Tidak dengan menambah teks di atas atau di bawah image seperti caption, namun teks ditampilkan di atas image. Teks yang disertai effek ini tidak akan mengganggu image yang ditampilkan karena dengan sebuah trik melalui kode css, maka ketika cursor berada di atas image maka teks akan menghilang. Disamping tidak memerlukan sebuah ruang khusus, penggunaan metode menampilkan teks seperti ini justru akan membuat blog semakin menarik. CSS3 transition mampu memberi sebuah tampilan dan effek sangat menarik ketika didalamnya juga melibatkan opacity effect.

D E M O

Anda bisa mengganti caption dalam bentuk seperti ini.

Cara yang cukup cantik untuk membuat blog semakin menarik.

gubhugreyot

Kode CSS :

.GRimgcaps{float:left;position:relative;display:block;}
.GRimgcaps img{width:100%;height:100%;padding:0;box-shadow:0 0 0 #fff;}
.GRimgcaps span{position:absolute;right:0;top:0;padding:2%;font-size:14px;max-width:35%;height:100%;display:block;background:rgba(255,255,255,0.7);-moz-transition:1s linear 1s;text-shadow:2px 2px 2px #666;text-align:center;}
.GRimgcaps span p{font-family:"MS Serif","New York",serif;color:#000;margin:6px 0;padding:0;}
.GRimgcaps span p.fs22{font-size:22px;}
.GRimgcaps span p.fs16{font-size:16px;}
.GRimgcaps span p.fs18{font-size:18px;}
.GRimgcaps:hover span{opacity:0;filter:alpha(opacity=0);}

Kode CSS :

<a href="http://lightbox-demo-tutorial.blogspot.com/" target="_blank" class="GRimgcaps" style="width:400px;height:300px;margin:10px 0;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6S8yPmJ_xkEgDsiIOdiz-ZYiKGl3mnAruIJ-HpBOdqsrQj9dOIXhPSbsWfC37e_Cn0oYwpj19etz7FPnpZdLpU47gmmSQLxxNa7W88OhbFGFiCCCfltVYxqzKes8eQ-RURuU795thGs/s400/img_gubhugreyot-house2.jpg" /><span><p class="fs18">Anda bisa mengganti caption dalam bentuk seperti ini.</p><p class="fs16">Cara yang cukup cantik untuk membuat blog semakin menarik.</p><p class="fs18">gubhugreyot</p></span></a>

Cara menggunakan kode :

1. Login ke blogger
   
   • Tuliskan "User Name" (untuk gmail) dan Alamat email lengkap (non gmail).
   • Tuliskan "Password (Kata sandi").
   • Klik "Sign in".
2. Beberapa saat setelah login akan terlihat "Halaman Dasbor (Dasboard)".
   Klik "Rancangan (Design)". Tunggu beberapa saat!.
3. Lanjutkan dengan klik "Edit HTML".
4. Anda akan menjumpai box "Edit Template" yang penuh dengan kode html (berupa kode css, javascript dan xHTML).
   Cari kode ]]></b:skin>.
5. Copy dan paste-kan kode css di atas ]]></b:skin>.
6. Klik "Simpan Template (Save Template)".
7. Gunakan xHTML di box posting.

Catatan/Keterangan :

1. Anda dapat menggunakan class="fs16", class="fs18", class="fs22" untuk membuat teks dengan ukuran 16px, 18px dan 22px pada tag "p".
2. width:400px;height:300px adalah ukuran image. Ukuran ini merupakan ukuran image yang akan ditampilkan.
3. Simpan kode CSS di atas ]]></b:skin> dan gunakan xHTML untuk posting.