[PHPBB3][Pedido] Añadir efecto a las leyendas de grupos anunciadas con imágenes

Hola,  Mi foro es phpbb3 y el navegador que uso es Chrome.

Usé un código CSS y un Javascript para poner las leyendas de grupos anunciadas con imágenes, tras modificarlo un poco para adaptarlo a lo que quería, queda de este modo:

Spoiler:

Cada grupo tiene una imagen distinta y me gustaría que la parte encerrada en un círculo rojo, que muestra el nombre del grupo, fuera del mismo tamaño y forma de cada imagen, que quedara detrás de ésta y que cuando el mouse pasara por la imagen, ésta desapareciera hacia dentro mostrando así el nombre de cada grupo correspondiente a cada imagen.

Gracias de antemano por su valiosa ayuda.

Necesito ver el tutorial que has seguido o, mejor aún, el foro donde lo has implementado.

Claro, el tutorial es este:


Y el foro es este:

¡Oops! No se como me he podido olvidar de tí. Perdona.

El código que has pasado no está hecho para permitir esa opción, puesto que ha sido pensado de otra forma. He hecho yo uno que cumple con tus requisitos.

CSS:

Código:

#legend {
 margin: 10px 0;
}
#legend a {
 background-size: cover;
 display: inline-block;
 height: 60px;
 width: 60px;
 margin-left: 10px;
 border-radius: 100%;
 overflow: hidden;
}

#legend a:last-child {
 margin-right: 0;
}

#legend a > span {
 width: 100%;
 height: 100%;
 line-height: 60px; /* Asegúrate de que cuadre con la altura */
 text-align: center;
 display: block;
 background-color: black;
 overflow: hidden;
 color: white;
 font-size: 9px;
 opacity: 0;
 -webkit-transition: opacity 1s;
 -moz-transition: opacity 1s;
 -ms-transition: opacity 1s;
 transition: opacity 1s;
}

#legend a:hover > span {
 opacity: .8;
}

JavaScript:

Código:

var groupImages = new Array();
groupImages[0] = 'http://r20.imgfast.net/users/2516/51/54/10/avatars/143-97.jpg' // Enlace a la imagen que aparecerá en cualquier grupo
groupImages[1] = 'https://socialprofiles.zenfs.com/images/a1ce73923d70732c68b96c3d2d5c2f4a_128.png'; // Enlace a la imagen del primer grupo que aparezca
groupImages[2] = 'http://r20.imgfast.net/users/2516/51/54/10/avatars/66-26.png'; // Enlace a la imagen del segundo grupo que aparezca

/* Copia la variable groupImages[n] sustituyendo n por el grupo que esté en la posición n en tu foro */

document.addEventListener('DOMContentLoaded', hoverGroups_flerex);
function hoverGroups_flerex() {
   var a = document.getElementById('i_whosonline').nextElementSibling.children;
   var b = a[a.length-1];
   var c = b.children;
   var d = new Array();
   for(var i = 0; i < c.length; i++) {
      d.push([c[i].textContent,c[i].firstChild.href]);
   }
   while(b.firstChild) {
      b.removeChild(b.firstChild);
   }
   for(var i = 0; i < d.length; i++) {
      var e = document.createElement('a');
      var f = document.createElement('span');
      e.href = d[i][1];
      f.innerHTML = d[i][0];
      e.style.backgroundImage = 'url(\''+ groupImages[i+1] +'\')';
      e.appendChild(f);
      b.appendChild(e);
   }
   b.id = 'legend';
}

¡Gracias! voy a probarlo y te aviso