Coolest Hover Style for PRE and ABBR Tag

Memberi kesan rasa berbeda tetapi memiliki fungsi yang sama yakni menampilkan kode tersembunyi ;)) Buat gaya dan refresh sedikit agar ada variasi. Do you still remember about it Hover Trick on pre Attribute? AA Koben akan membuat hal serupa tetapi sama mudah dalam pemakaian. Sekarang efek hover tidak menyamping melainkan ke bawah ;))
Selain dari tutorial itu, gue juga mau berbagi trik menampilkan title (judul) dari varible marked up ABBR.
HTML abbr tag biasa dipakai ketika menuliskan singkatan² seperti HTML, XHTML, CSS dan lain² Jadi ketika nanti kita sorot itu singkatan, maka akan ada style edan disana :))
Kode CSS Pre

    .area pre {
        display: none;
    }
    .area:hover pre {
        display: block;
        background: #ffffee;
        border: 1px solid #555;
        overflow: auto;
        overflow-x: hidden;
        font-size: 13px;
        position: relative;
        color: #060;
        width: 100%;
        height: 99px;
        margin: 0px;
        padding: 5px 5px 0 0;
        font-family: "Courier New", Arial, Tahoma, monospace;
        clear: both;
    }

Kode HTML Pre<div class="area">
<pre>

------ YOUR CONTENT HERE ------

</pre>
</div>Begitu saja :D
Untuk coded bagian hover ABBR silahkan panteungin terus...

CSS Coded ABBR

abbr {
  cursor: help;
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
abbr:after, abbr:before {
  font-size: 1.5em;
  position: absolute;
  display: inline-block;
  -webkit-transition: scale 300ms ease-in-out;
  -moz-transition: scale 300ms ease-in-out;
  -ms-transition: scale 300ms ease-in-out;
  -o-transition: scale 300ms ease-in-out;
  transition: scale 300ms ease-in-out;
  -webkit-transition-property: -webkit-transform, -webkit-filter, color;
  -moz-transition-property: -moz-transform, -webkit-filter, color;
  -ms-transition-property: -ms-transform, -webkit-filter, color;
  -o-transition-property: -o-transform, -webkit-filter, color;
  transition-property: transform -webkit-filter color;
}
abbr:after {
  content: '+';
  top: -3px;
  right: -7px;
  color: #f00;
  font-size: 11px;
}
abbr:before {
  content: attr(data-title);
  color: #000;
  display: inline-block;
  font-size: .8em;
  line-height: 1em;
  padding: 2px 5px;
  text-align: center;
  bottom: 100%;
  right: -45px;
  background: #FFE;
  box-shadow: 0 0 0 1px #000;
  width: auto;
  text-indent: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
}
abbr:hover:after {
  border: 1px dotted #f00;
  border-top: none;
  border-left: none;
  -webkit-animation: wh 700ms;
  -moz-animation: wh 700ms;
  -o-animation: wh 700ms;
  animation: wh 700ms;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
abbr:hover:before {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

MarkUp HTML<abbr data-title="ADD JUDUL HERE">ADD SINGKATAN HERE</abbr>

Happy coding \m/