Foros Programación Cliente

Thumbnails en CSS

10 10 Respuestas Sábado 13 de agosto, 2011
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...

Registrado desde 27/04/10
Número de posts: 260
  • Avatar de JCMartinez JCMartinez Registrado desde 26/10/10 / Número de posts: 117
    ¿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
    jcmartinezweb.com
    Twitter
    Publicado hace 9 meses
  • Avatar de Bonette Bonette Registrado desde 27/04/10 / Número de posts: 260
    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.
    Publicado hace 9 meses
  • Avatar de Enrique Gonzalez Enrique Gonzalez Registrado desde 03/07/11 / Número de posts: 56
    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(); }
    );
    enriquegonzalez.net
    Publicado hace 9 meses
  • Avatar de JCMartinez JCMartinez Registrado desde 26/10/10 / Número de posts: 117
    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.
    jcmartinezweb.com
    Twitter
    Publicado hace 9 meses
  • Avatar de Bonette Bonette Registrado desde 27/04/10 / Número de posts: 260
    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...
    Publicado hace 9 meses
  • Avatar de Cloudstudio Cloudstudio Registrado desde 05/05/09 / Número de posts: 537
    Cual es la duda exactamente ?
    cloudstudio.es@gmail.com

    www.cloudstudio.es
    psd a html
    Publicado hace 9 meses
  • Avatar de Enrique Gonzalez Enrique Gonzalez Registrado desde 03/07/11 / Número de posts: 56
    ¿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
    enriquegonzalez.net
    Publicado hace 9 meses
  • Avatar de jacobo rus jacobo rus Registrado desde 10/05/07 / Número de posts: 127
    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
    ··························································
    Jacobo @ x.a.r.o.p.e
    Publicado hace 9 meses
  • Avatar de Bonette Bonette Registrado desde 27/04/10 / Número de posts: 260
    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.
    Publicado hace 9 meses
  • Avatar de Bonette Bonette Registrado desde 27/04/10 / Número de posts: 260
    Esto es lo que ocurre en Firefox

    Publicado hace 9 meses