#CUAMORTIZOR

AcasaAcasa  ÎnregistrareÎnregistrare  ConectareConectare  

Distribuiţi
Lucian OnlineOffline
Efect avatar Empty
Efect avatar
Vin Mar 06, 2015 8:52 am
Multumesc Citeaza Editeaza Sterge Info
1º - Code
In

viewtopic_body

find

{postrow.displayed.POSTER_AVATAR}

2º - Change it to:
Cod:
       <div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div><figure>{postrow.displayed.POSTER_AVATAR}</figure></div>

3º - CSS
In

CSS

add:  
Cod:
        .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);}

[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Sus In joshttps://cuamortizor.ace.st
 
Efect avatar
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1