Seseorang bertanya ihwal bagaimana cara menciptakan quote tertutup yang dapat membuka ketika pointer berada di atasnya. Caranya sangat sederhana, adalah dengan memakai CSS Pseudo Classes dan CSS Transisi:
Salin arahan di bawah ini, lalu letakkan sempurna di atas arahan ]]></b:skin> atau </style>:
blockquote.collapsed { margin:15px 30px; font:italic normal 14px/1.4 Georgia,Serif; height:0; padding:0 0; background-color:#FFE046; border:10px solid #FDD404; border-left-color:#D7362E; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4); -moz-box-shadow:0 1px 2px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4); overflow:auto; -webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s; -moz-transition:all 1s cubic-bezier(1,0,0,1) .5s; -ms-transition:all 1s cubic-bezier(1,0,0,1) .5s; -o-transition:all 1s cubic-bezier(1,0,0,1) .5s; transition:all 1s cubic-bezier(1,0,0,1) .5s; } blockquote.collapsed:hover { padding:10px 15px; background-color:#47AD47; border:5px solid #156715; height:350px; }Aktivasi dapat dilakukan dengan cara menambahkan kelas collapsed pada elemen <blockquote> yang Anda inginkan:
<blockquote class="collapsed"> Konten di sini... </blockquote>