Membuat Spoiler Box Dengan CSS Transisi

Membuat Spoiler Box Dengan CSS Transisi - Saya bingung harus menuliskan judul yang baik untuk artikel kali ini, dikarenakan artikel ini atas permintaan sahabat kita yang tidak mau disebutkan namanya dalam postingan ini, 3 hari yang lalu beliau mengirimkan email sebuah permintaan untuk dibuatkan spoiler box tanpa tombol panel, tetapi dapat menyembunyikan text, yang kita kenal sebagai spoiler box (Tombol Buka Tutup).

Pesannya Seperti ini :

Mbak DEVY.! maaf kalau saya lancang mengirim pesan melalui email langsung ke mbak, saya tertarik dengan beberapa modifikasi spoiler box yang mbak desain dalam postingan blog mbak seperti yang ini Membuat Panel Slide Untuk Menyimpan Text,
Dan yang ini Modifikasi Spoiler Box Efek Toggle
Tetapi, semuanya menggunakan tombol/panel untuk membuka spoiler tersebut, dan kodenya amat-amat banyak sekali mbak. " Bisa gak mbak buatin lagi model lain, tetapi untuk membuka box tersebut tanpa panel atau tombol, karena jujur tutor mbak tentang spoiler box saya KOPAS dalam sebuah artikel, sehingga ada pengunjung yang bertanya tentang hal diatas, sekali lagi maaf ya mbak.! dan saya tunggu update-tan artikel mbak untuk yang satu ini "
Terimakasih...

From Message - (****@gmail.com)

Sebenarnya saya kurang memahami pesan beliau ingin apa.?, tetapi beberapa kali saya simak ternyata tujuannya tentang spoiler box tanpa panel/tombol untuk membukanya, mudah-mudahan sesuai harapan, saya akan coba memodifikasi spoiler default menggunakan kode BLOCkquote (memotong kalimat untuk tampil pada lembar baru) menggunakan pointer mouse. Detailnya spoiler box akan terbuka saat kursor mouse melintas sehingga tanpa klik, tanpa tombol tetapi box akan terbuka secara otomatis saat panah kursor diarahkan

blockquote.collapsed {
  font:italic normal 14px/1.4 Georgia,Serif;
  margin:0 0 0 47.5px;
  height:0;
  border:13px solid #93c47d;
  border-left-color:#073763;
  overflow:auto;
  -webkit-transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
  -moz-transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
  -ms-transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
  -o-transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
  transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
}

blockquote.collapsed:hover {
  padding:10px;
  background-color:#d0e0e3;
  border:2px solid #073763;
  height:250px;
  width:auto;
}
blockquote.collapsed:content {content:"open"}

Sesuai permintaan beliau kodenya saya persingkat, dan saya menggunakan efek transisi untuk mengatur kecepatan Open-Close Box, sedangkan kode pengganti tombol saya menggunakan efek hover blockquote.

Sekarang tahap akhir penerapan pada postingan blog dengan HTML berikut

<div style="background: #073763;color: white; font-weight: bold;padding: 2px;margin-bottom:-1.6em; width: 44px;margin-right:85%;">
OPEN</div>
<blockquote class="collapsed">
SAHABAT BLOGGER 77 // Ganti Dengan Text Anda
</blockquote>

Lihat Demo

DEMO SHOW

Semoga Apa yang saya SHARE kali ini dapat memberikan manfaat dan menjawab permintaan beliau. Dan tidak lupa buat semua sahabat pecinta SAHABAT BLOGGER 77, saya mengucapkan salam hangat dan sayang spesial untuk sahabat semua.

I miss U, see... you guys..!!!