En este tutorial se muestra la forma de crear efectos hover lujo en miniaturas utilizando CSS3 transiciones con CSS: hover pseudo-clase.

1º - Editar plantillas:
En viewtopic_body encontrar:

Código:

{postrow.displayed.POSTER_AVATAR}

Cambiar por:

Código:

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

2º - La edición de hojas de estilo CSS:
En CSS añadir:

Código:

.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:#cdf16c;
      box-shadow:0 0 3px #5b8d22;
      -moz-ox-shadow:0 0 3px #5b8d22;
      -webkit-box-shadow:0 0 3px #5b8d22;
      background: #ffffff;
      background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #99cc99 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#99cc99));
      background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#99cc99 100%);
      background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#99cc99 100%);
      background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#99cc99 100%);
      background: radial-gradient(center, ellipse cover, #ffffff 0%,#99cc99f 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#99cc99',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:#5b8d22 #cdf16c #5b8d22 #cdf16c;
      box-shadow:0 0 10px #33cc33;
      -moz-box-shadow:0 0 10px #33cc33;
      -webkit-box-shadow:0 0 10px #33cc33;
      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: #cdf16c rgb(141, 177, 62)#cdf16c rgb(141, 177, 62);
      box-shadow:0 0 20px #5b8d22;
      -moz-box-shadow:0 0 20px #5b8d22;
      -webkit-box-shadow:0 0 20px #5b8d22;
      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);}

P.D.: Es posible que funcione también en PhpBB2, cualquier duda pueden hacerla en este post,

ver

no me agarra. Ayuda