Make Hover Folded Corner Effect use CSS

Ternyata masih berlanjut cerita make peel or flip page effect using css3! Trik efek peel memang mempunyai magnet tersendiri. Selain bisa menarik perhatian pengunjung tentu hiasan blog biar lebih atraktif :d Entah ada berapa biji istilah atau namanya peel, flip, or curl!
Efek sama berbeda nama, tergantung siapa yang memberi nama saja lah ;)) Mengembangkan artikel sebelumnya tentang peel effect or css3 box shadow!. Master Nicolas Gallagher membuat trick folded corner effect secara permanent pada suatu konten. Sekarang bagaimana jadinya folded-corner effect akan terlihat ketika cursor mengarah (hover) pada konten yang dimaksud?
DEMO

This is animated folded-corner demo...
This is cool right?

Seperti itu :x

.folded-area {
   width: 240px;
   padding: 10px;
   margin: 0px auto 20px auto;
   position: relative;
   background-color: #fafafa;
   box-shadow: 0 1px 3px rgba(100, 100, 100, 0.5), 0 0 40px rgba(100, 100, 100, 0.1) inset;
}
.folded-corner {
   width: 0px;
   height: 0px;
   position: absolute;
   top: 0;
   right: 0;
   border-width: 0;
   border-style: solid;
   background: red;
   -webkit-border-radius: 0 0 0 15px;
   border-radius: 0 0 0 15px;
   border-color: #000 #000 transparent transparent;
   -webkit-transition: border-width 0.2s ease-out;
   -moz-transition: border-width 0.2s ease-out;
   -ms-transition: border-width 0.2s ease-out;
   -o-transition: border-width 0.2s ease-out;
   transition: border-width 0.2s ease-out;
}
.photos {padding: 0px;}
.folded-area:hover .folded-corner {
   border-width: 0 50px 50px 0;
}

Markup HTML
Folded corner for div area<div class="folded-area">
<span class="folded-corner"></span>
BLAH BLEH BLOH
</div>Folded corner for div image<div class="folded-area photos">
<span class="folded-corner"></span>
<img src="YOUT IMAGE" alt="" />
</div>Resource:CSSDeck
Happy coding \m/