Eso del estilo va porque vamos a jugar un poco con las propiedades CSS, no porque las sugerencias que planteo como ejemplos sean una virguería estética.
Se trata de algo tan sencillo y vistoso a la vez, como hacer aparecer información adicional sobre una imagen al pasar el puntero por encima de ella, y que redundará en un "despegue" para tus publicaciones. Para esto vamos a echar mano de cosas que ya hemos visto en otras ocasiones. Básicamente z-index, position y opacity.
La teoría es que montamos una caja dentro de la cual irá una imagen con enlace y dentro del mismo enlace un span con los datos (texto). Como solaparemos esos elementos en el mismo espacio, el orden lo marcamos con z-index, de manera que el texto quede por encima de la imagen. Como inicialmente no queremos que se vea, le añadiremos también una opacidad (opacity:0;) haciéndolo inicialmente transparente (no visible).
El cambio vendrá con el hover sobre la caja principal, momento en el cual la transparencia será nula (bueno, casi) dejando ver los datos antes comentados.
En la práctica estamos hablando de algo así, pero luego lo complicaremos un poco más:
La explicación sobre el código CSS:
Con esto anterior en nuestra parte de estilo (entre las etiquetas skin) ya sólo tendremos que crear el HTML con esta estructura para que la cosa salga como en la demo:
___________________________________________________________Y con esa misma estructura podemos hacer otras cosas si cambiamos un poco el estilo y en lugar de sólo texto añadimos más cosas mediante un segundo span con una nueva clase. Pasa el puntero por esta otra imagen.
El Css de esa imagen es:
En el HTML añadimos un segundo span que tendrá como fondo la imagen del disco. En este caso debe tener el fondo transparente (GIF o PNG):
___________________________________________________________Por último otra idea en la misma línea añadiendo un triangulito al rótulo, animándolo con un volteo y superponiendo una segunda imagen que aparece poco a poco. Como antes, hemos cambiado la opacidad para el efecto del rótulo, pero para el de la segunda imagen hemos jugado con un height inicial igual a cero.
A diferencia del anterior ejemplo, aquí la imagen "móvil" no será fija como sí que era el disco, así que no podemos ponerla como fondo (background). La añadiremos también con un span y la clase oportuna, pero con libertad de añadir la imagen que queramos desde allí.
El HTML es:
A partir de aquí el resto de posibles variaciones os las dejo a vosotros ;)
___________________________________________________________