English Português

Muchas veces por cuestiones de espacio en nuestro sitio necesitamos mostrar imagenes pequeñas y para mostrarlas en su tamaño real podemos poner un link a una página nueva como hacen varios sistema de publicación como Blogger. La otra es usar un efecto de pop-up, es decir, una visualización del tamaño real sobre el contenido que puede mostrarse o no a gusto del usurio, como hace Lightbox JS con Javascript y ahora te mostraremos como hacerlo solamente con CSS (Ver ejemplo).

  1. Con tu imagen tamaño real, crea una imagen más pequeña (thumbnail). Esto lo puedes hacer con cualquier software de edición de imagen como photoshop.
  2. Lo siguiente es definir las clases que usaremos, aquí es importante tanto el tamaño de la imagen pequeña y la de tamaño real, ya que de estas depende la ubicación de la visualización de la imagen.
  3. Escensialmente ocuparemos 3 clases:

    #imagen
    .img-link
    .t-real

    Las propiedades de las clases y subclases a utilizar con sus respectivas anotaciones, son las siguientes:

    #imagen {
     background-color: #FFFFFF;
     position: relative;
     top: 10px; 
     width: 100px;}
    
    /*ocultamos la imagen tamaño real*/
    #imagen a .t-real {
     width: 1px; /*dimensionamos a 1px de ancho */
     height: 1px; /*y 1px de alto */
     border: 0px;
     display: block;
     position: absolute; /*la posicionamos fuera de la parte visible de la pantalla */
     left: -1px;
     top: -1px;
    }
    
    /*quitamos el borde a las imagenes */
    #imagen a img {
     border: 0;
    }
    
    /*propiedades del thumbnail */
    #imagen a.img-link, #imagen a.img-link:visited {
     background: #FFFFFF;
     width: 100px; /*ancho imagen pequeña*/
     height: 100px; /*alto imagen pequeña*/
     border: 1px solid #000000;
     display: block;
     text-decoration: none;
    }
    
    #imagen a.img-link:hover {
     background-color: #000000;
     color: #000000;
     text-decoration: none;
    }
    
    /*mostramos imagen tamaño real */
    #imagen a.img-link:hover .t-real {
     height: 300px; /*alto imagen tamaño real*/
     width: 300px; /*ancho imagen tamaño real*/
     border: 1px solid #000000; /*borde imagen tamaño real*/
     display: block;
     position: absolute; 
     left: 125px; /*posición con relación al tamaño de la imagen pequeña thumbnail*/
     top: -60px; 
    
    }

    El funcionamiento en escencia de este “truco” es desaparecer la imagen tamaño real sacandola del área visible y hacerla aparecer colocando enfrente de la imagen pequeña.

  4. Entonces, el código HTML para implementarla es el siguiente:
    <div id="imagen">
    <a class="img-link" href="#">
    <img src="http://tusitio.com/tu-imagen-pequeña.jpg" width="100px" height="100px"/>
    <img  src="http://tusitio.com/tu-imagen-tamaño-real.jpg" width="300px" height="300px" class="t-real"/>
    </a>
    </div>

    Es importante que observes la relación de tamaño de la imagen chica y real con respecto a las ubicaciones relativas en el código CSS.

Ver el ejemplo en funcionamiento.
Descargar el ejemplo.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Sirena / Hace 11 años /

      Enhorabuena por tu blog, haces un gran trabajo con esto. Verás, tengo una duda, más bien un problemilla con mi blog. Quería saber si hay alguna forma de quitar la fecha de los comentarios. Es decir, cuando alguien me deja un comentario, siempre aparece la fecha de cuando lo escribió; y yo quería saber si se puede eliminar esta fecha, y dejar sólo el comentario.
      Si me pudieras ayudar te lo agradecería en el alma, amigo. Espero tu respuesta. Gracias. Un saludo!

      Responder a Sirena →
    2. Francisco / Hace 11 años /

      Hola sirena, gracias por los comentarios, sobre tu problema, aquí te explico como:

      http://blogyweb.blogspot.com/2007/04/ocultar-la-fecha-en-los-comentarios-de.html

      Cualquier otra duda sobre eso, lo vemos en ese artículo.

      Saludos!

      Responder a Francisco →
    3. IRANTZU / Hace 10 años /

      Hola, enhorabuena por el ejemplo
      intento descargarme el ejemplo de “Visualización pop-up de una imagen con CSS” pero ya no está operativo
      puedes mandarmelo a mi correo? gracias

      Responder a IRANTZU →
    4. Hugo / Hace 9 años /

      Hola!
      Muy bueno el código para las ventanas pop up! Pero tengo una duda, para poder centrar la imagen pequeña como debo hacerlo?? :S
      Muchas gracias! Y ánimo!

      Responder a Hugo →
    5. Hugo / Hace 9 años /

      Me refiero, dentro del documento y también que se centre dentro de la pantalla. Y si la imagen tiene otro tamaño?? es decir por ejemplo vertical?

      Gracias de nuevo!

      Responder a Hugo →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad