Micaela 20 de septiembre de 2009 a las 09.04
   Imprimir artículo
elWebmaster.com

Ocultar y revelar texto detr√°s de im√°genes con CSS y jQuery


En el siguiente art√≠culo les traemos un genial efecto hover que les resultar√° extremadamente √ļtil y sencillo para dar un toque especial a sus dise√Īos.

Se trata de un efecto que nos permite ocultar y mostrar texto que se encuentra detr√°s de una imagen y lo podemos lograr simplemente implementando algo de CSS y jQuery. 110 Demo

Paso 1: Crear el código

Crea un documento HTML nuevo y a√Īade las etiquetas est√°ndar HTML (html, body, etc.). Luego, dentro de la etiqueta body, necesitamos crear un div contenedor que se llamar√° “teaser-wrap.”

Ahora, tambi√©n necesitamos crear un envoltorio para cada imagen y descripci√≥n. Para el demo 1, hemos a√Īadido unos seis. Sin embargo, para mantener la simplicidad, s√≥lo creamos uno. Es recomendable duplicar √©ste X cantidad de veces.

  1. <div id="teaser-wrap"><!--end teaser--></div>
  2. <!--end teaser-wrap-->

Paso 2: A√Īadir los detalles

Ahora que tenemos nuestro div teaser, insertemos la imagen, una etiqueta encabezadora, descripci√≥n y un link “Leer m√°s”. Esto es s√≥lo un ejemplo que pueden reajustar como deseen.

  1. <div class="teaser"><img src="image.jpg" alt="photo" />
  2. <h3>Envato's Birthday</h3>
  3. Just a preview goes here.
  4. <a href="#">Read More...</a></div>
  5. <!--end teaser-->

Nota: Si deseas seis im√°genes/descripciones, duplica este bloque seis veces. 211

Paso 3: CSS r√°pido

Como pueden ver en la imagen de arriba, el teto se encuentra debajo de la misma. Sin embargo, nosotros deseamos que est√© detr√°s. ¬ŅC√≥mo logramos esto? Es bastante simple. La respuesta es “posicionamiento absoluto”. Crea una hoja de estilos nueva, refer√©nciala con etiquetas head e inserta los siguientes estilos:

  1. .teaser {
  2. width: 200px;
  3. height: 200px;
  4. overflow: hidden;
  5. position: relative;
  6. cursor: pointer;
  7. }
  8.  
  9. .teaser img {
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. }
  14.  
  15. #teaser-wrap .teaser {
  16. float: left;
  17. margin: 1em;
  18. }

Observen c√≥mo hemos establecido nuestro div teaser igual al mismo ancho y altura de nuestras im√°genes. Adem√°s hemos establecido un nuevo contexto de posicionamiento, ya que la imagen tendr√° que ser posicionada absolutamente en la esquina superior izquierda del div. Esto llevar√° la imagen fuera del flujo del documento, y permitir√° que todo el texto de abajo aparezca. Por √ļltimo, tambi√©n hemos hecho flotar todos los divs teaser a la izquierda y a√Īadido un poco de m√°rgenes para proporcionar algunos espacios. La p√°gina ahora debe lucir as√≠: 34

Paso 4: jQuery simple

Ahora para el código. Primero, aseguramos la referencia jQuery al final de la página, justo antes de la etiqueta body finalizadora.

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Necesitamos notar cu√°ndo el usuario hace hover sobre el div teaser. Cu√°ndo lo haga, necesitamos decirle a la imagen dentro de este div que se displace a la izquierda (el mismo valor que el ancho de la imagen) y cuando el usuario deje de hacer hover, nosotros hacemos lo opuesto.

  1. $('.teaser').hover(function() {
  2. // over
  3.  
  4. $(this).children('img').stop().animate({
  5. left : '-200px'
  6. }, 500);
  7.  
  8. },
  9.  
  10. function() {
  11. // out
  12.  
  13. $(this).children('img').stop().animate({
  14. left : '0'
  15. }, 500);
  16. });

¬ŅQu√© es esa funci√≥n “Stop()”?
Intenta removerla y luego actualiza la p√°gina. A continuaci√≥n, quita el mouse de la imagen r√°pidamente. ¬ŅNotan c√≥mo el efecto sigue pasando? No queremos esto. “Stop()” simplemente quiere decir que paren las animaciones y luego comiencen nuevamente.

¬ŅQu√© pasa si no conozco el ancho de la imagen?
Si necesitar determinar este valor de forma din√°mica, puedes utilizar la funci√≥n “outerWidth()”. Esto devolver√° el valor del ancho de la imagen, m√°s sus m√°rgenes y padding.

¬ŅPor qu√© no aplicamos la funci√≥n hover directamente a las im√°genes en lugar de al div Teaser?
Porque no se puede hacer de esta forma. Una vez que la imagen se deslice del mouse, inmediatamente se volver√° a cerrar.

Completo

41

¬°Ah√≠ lo tienen! Un efecto muy bueno y sencillo para a√Īadir en sus templates.

Fuente: In the Woods


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. carlos dice:

    hola gente de webmaster, tengo un consulta¬°¬°¬°
    este hover solo funciona en safari y chrome puesto que lo probe con firefox e IE y no lo puedo hacer andar¬°¬°¬°
    alguna sugerencia¬°¬°
    gracias¬°¬°¬°

  2. omar dice:

    Es sumamente complicado, aburrido y cansado seguir todo ese proceso si en esta pag web http://www.viciao2k3.net/services/cryptimg Est√° todo f√°cil y sencillo 3 pasos y ya esta.

  3. Carlos dice:

    #1 lo he probado en firefox y funciona correctamente! #2 esto es un c√≥digo para websmaster y programadores jquery, no para novatos como t√ļ Omar

  4. Rod dice:

    ¡¡¡GRACIAS!!! muchas gracias, no sabes del gran apuro que me sacaste con este código. De nuevo gracias, es lo menos que puedo decir

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder