Thumbnails en CSS
4 seguidores
Hola,
Tengo la estructura de mi web, básicamente terminada... Pero a la hora de presentar los proyectos más nuevos en la index, me gustaría hacerlo a través de thumbnails o miniaturas con el nombre del proyecto bajo la imagen.
Pero no sé cual es la mejor forma de hacerlo...
Usuario desconocido
Esto es lo que ocurre en Firefox
Usuario desconocido
Gracias por las respuestas chicos, estuve de vacaciones.
La situación ahora es la siguiente, conseguí introducir el título de proyecto bajo cada una de las miniaturas. En Chrome y Safari el texto aparece en la posición correcta, pero al verlo en Firefox, se desplaza mucho hacia abajo... y no entiendo el motivo.
jacoborus
Aquí tienes es un ejemplo similar explicado paso a paso, cambiando un poco el CSS debería servirte. Puedes descargarlo desde Github: https://github.com/dcneiner/jQuery-Bling
enrique_gonzalez
¿entonces la idea es que la descripción de la miniatura salga debajo al hacer rollover sobre la miniatura? Te vale el jQuery que puesto, solo que en vez de ser 2 capas una encima de otra están una debajo de otra
cloudstudio
Cual es la duda exactamente ?
Usuario desconocido
La idea es esta que os pongo debajo. 12 Miniaturas de 200x200 px repartidas de 4 en 4, en 3 filas y debajo de cada miniatura, el título del proyecto.
Cada miniatura, enlazaría con el proyecto en cuestión...
jcmartinez
No me queda claro si lo que quieres hacer es generar las miniaturas de forma dinámica o añadirles un panel informativo a las miniaturas al situar el cursor sobre ellas.
Lo que te he comentado vale para el primer caso y lo que te ha comentado Enrique vale para el segundo.
enrique_gonzalez
el ejemplo que pones de SantsSerif es bastante facil de hacer, hay mil maneras de conseguirlo, por ejemplo: (ojo esto está escrito de memoria, igual hay algun error)
<div class="caja"> <-----relativa
<div class="eltexto">El texto</div> <----- absoluta, oculta por css
<div class="laimagen">imagen</div> <----- absoluta
</div>
$('div.caja .laimagen').hover(
function() { $('div.caja .eltexto').show(); },
function() { $('div.caja .eltexto').hide(); }
);
Usuario desconocido
Gracias por la respuesta, estoy creando la web desde cero, como comenté para practicar con CSS, lo que quiero insertar es algo parecido a esto que tiene SantsSerif en su web. La verdad es que me estoy volviendo algo loco para conseguirlo.
jcmartinez
¿Estás utilizando algún CMS?.
Si no usas ningún CMS podrías hacerlo utilizando jquery (creo recordar que hay algunos plugins para ello).
También puedes hacerlo con PHP.
Un Saludo