Kép effekt

Egy nagyon aranyos,érdekes és hasznos kis képeffekt!Sok dolgot lehet vele megoldani.Pl. Chat,Információk,Aktivitásvagy akármilyen más modull. c:
Ha viszitek,írjatok forrást!Nem saját!



                                                                         A KÓD:
<style type="text/css">
.regan .alec { width: 240px; height: 80px; background-color: #736aa2; border-bottom: 7px solid #660000; position: relative; top: 0px; left: 0px; opacity: 0; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }
.moretti a:hover { color: #660000; }
.regan .anna { width: 150px; padding-top: 5px; padding-bottom: 5px; font-size: 10px; letter-spacing: 2px; color: #fff; text-align: center; text-transform: lowercase; line-height: 100%; font-style: italic; background-color: #d2788c; font-family: cambria, serif; position: absolute; top: 65px; opacity: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s;}
</style>
<link rel="stylesheet" type="text/css" href="http://yougobeckycoco.b1.jcink.com/uploads/yougobeckycoco/tracker.css" />

<center>
<div class="regan" style="background-color: #9eacca; width: 240px;">
<div class="img">
<div style="width: 150px; height: 150px; border-radius: 100%; background-image: url(KÉP LINKJE);">
<div class="anna">

Cím

</div>
</div>
</div>
<div class="alec">
</div>
<div class="moretti">

SZÖVEGSZÖVEGSZÖVEGSZÖVEG
</div>
</div>
</center>


                                                                          DEMÓ:

Cím helye

SZÖVEG VAGY CBOX HELYE