Demo:

[You must be registered and logged in to see this link.]
rê vào cái avatar
Cách làm:
[Bài viết không bị Ẩn]Tìm:

Code:

{postrow.displayed.POSTER_AVATAR}

Thay bằng

Code:

<div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div><figure>{postrow.displayed.POSTER_AVATAR}</figure></div>


CSS:

Code:

  .imgholder{
       position:relative;
       width:120px;
       height:120px;
       border-radius:100px;
       float:left;
       margin:40px 30px;
    }
    /* thumbnails style */
    .imgholder img{
       position:absolute;
       left:0;
       top:0;
       width:120px;
       height:120px;
       z-index:5;
       border-radius:100px;
       -moz-border-radius:100px;
       -webkit-border-radius:100px;
       opacity:0.3;
       filter: alpha(opacity = 30);
       box-shadow:0 0 5px #000;
       -moz-box-shadow:0 0 5px #000;
       -webkit-box-shadow:0 0 5px #000;
      
     transform: scale(0.5,0.5);
       -ms-transform: scale(0.5,0.5);
       -moz-transform: scale(0.5,0.5);
       -webkit-transform: scale(0.5,0.5);
      
     transition:
          opacity 1s,
          transform 1s ease-in-out 0.3s;
       -moz-transition:
          opacity 1s,
          -moz-transform 1s ease-in-out 0.3s;
       -webkit-transition:
          opacity 1s,
          -webkit-transform 1s ease-in-out 0.3s;
    }
    .imgholder:hover img{
       opacity:1;
       filter: alpha(opacity = 100);
       transform: scale(1,1);
       -ms-transform: scale(1,1);
       -moz-transform: scale(1,1);
       -webkit-transform: scale(1,1);
    }

    .imgholder figcaption{
       position:absolute;
       left:-5px;
       top:40%;
       width:130px;
       color:#004E87;
       font-weight:bold;
       text-shadow:-1px -1px 0 #fff;
       z-index:4;
      
     transition:
          top 0.5s ease-out;
       -moz-transition:
          top 0.5s ease-out;
       -webkit-transition:
          top 0.5s ease-out;
    }
    .imgholder:hover figcaption{
       top:120%;
    }
    /* decorations style */
    .imgholder .circle{
       position:absolute;
       border-radius:100px;
       -moz-border-radius:100px;
       -webkit-border-radius:100px;
    }
    .imgholder .outer1{
       top:-8px;
       left:-8px;
       width:120px;
       height:120px;
       z-index:2;
       border:8px solid;
       border-color:#DEEBFC;
       box-shadow:0 0 3px #AFD3FF;
       -moz-ox-shadow:0 0 3px #AFD3FF;
       -webkit-box-shadow:0 0 3px #AFD3FF;
       background: #ffffff;
       background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
       background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
       background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
       background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
       background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
       background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
       transform:rotate(90deg);
       -ms-transform:rotate(90deg);
       -moz-transform:rotate(90deg);
       -webkit-transform:rotate(90deg);
       transition:
          transform 1.8s ease-in-out,
          box-shadow 1s ease-out,
          border-color 1.5s;
       -moz-transition:
          -moz-transform 1.8s ease-in-out,
          -moz-box-shadow 1s ease-out,
          border-color 1.5s;
       -webkit-transition:
          -webkit-transform 1.8s ease-in-out,
          -webkit-box-shadow 1s ease-out,
          border-color 1.5s;}
    .imgholder:hover .outer1{
       border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
       box-shadow:0 0 10px #0285E2;
       -moz-box-shadow:0 0 10px #0285E2;
       -webkit-box-shadow:0 0 10px #0285E2;
       transform:rotate(-10deg);
       -ms-transform:rotate(-10deg);
       -moz-transform:rotate(-10deg);
       -webkit-transform:rotate(-10deg);}
    .imgholder .outer2{
       top:-18px;
       left:-18px;
       width:136px;
       height:136px;
       z-index:1;
       border:10px solid;
       border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
       box-shadow:0 0 20px #8EB9FF;
       -moz-box-shadow:0 0 20px #8EB9FF;
       -webkit-box-shadow:0 0 20px #8EB9FF;
       opacity:0;
       filter: alpha(opacity = 0);
       transform: scale(1.3,1.3) rotate(180deg);
       -ms-transform: scale(1.3,1.3) rotate(180deg);
       -moz-transform: scale(1.3,1.3) rotate(180deg);
       -webkit-transform: scale(1.3,1.3) rotate(180deg);
       transition:
          opacity 0.5s,
          transform 0.7s ease-out;
       -moz-transition:
          opacity 0.5s,
          -moz-transform 0.7s ease-out;
       -webkit-transition:
          opacity 0.5s,
          -webkit-transform 0.7s ease-out;}
    .imgholder:hover .outer2{
       opacity:0.9;
       filter: alpha(opacity = 90);
       transform: scale(1,1) rotate(-10deg);
       -ms-transform: scale(1,1) rotate(-10deg);
       -moz-transform: scale(1,1) rotate(-10deg);
       -webkit-transform: scale(1,1) rotate(-10deg);}

nguồn: cp[/Bài viết không bị Ẩn]
:Bài viết không bị Ẩn:

ssssssssssssssssssssssss

cái này k đc ai hưởng ứng hử ? buồn thôi lần sau k post bài nữa

xemdfdfdfdfdfd

xxxxxxxxxxxxxsax sã

xemmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

xem

xem

xem

xem

uuuuuupppppppppppp

goooooooooooooooood

dsafsdfsdfsdfsdfdf

ffffffffffffff

adssssssssssssssssssssss

xemmmmmmmm

xemmmmmmm với :3

xem xem xem xem