Mesaje : 76 Data de inscriere : 29/01/2014
Varsta : 32
Localizare : Timisoara
| | 1º - Code In viewtopic_bodyfind {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] |
| |