Deprecated: Assigning the return value of new by reference is deprecated in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/post-series/post-series.php on line 841 Notice: is_feed was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false. Please see Debugging in WordPress for more information. (This message was added in version 3.1.) in /home/summarg/domains/summarg.com/public_html/wp-includes/functions.php on line 3245 5 efectos CSS para animar tus imágenes | SummArg

SummArg | Cursos y recursos para webmasters

02/06/2011

5 efectos CSS para animar tus imágenes

designshack.co.uk nos trae 5 efectos CSS para aplicar a tus imágenes que se activan cuando el usuario pasa el puntero del mouse sobre las mismas (hover). Los códigos están listos para copiar y pegar.

Imagen que se levanta | Demo

Al pasar el puntero del mouse sobre la imagen ésta se desliza suavemente hacia arriba, luego retorna a su posición original.


Código

.ex1 img{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.ex1 img:hover {
    margin-top: 2px;
}

Imagen que crece | Demo | Código

La imagen aumenta de tamaño y se expande, empujando a las otras imágenes hacia arriba y abajo.

Texto que aparece suavemente | Demo | Código

Al pasar el puntero del mouse sobre la imagen, un texto con efecto Fade In aparece en escena.

Imagen que gira | Demo | Código

La imagen rota 45° y luego retorna a su posición.

Imagen que brilla | Demo | Código

Al pasar el puntero sobre la imagen, se aplica un efecto de luminosidad en su margen y en algunos navegadores se puede observar un reflejo.

Dejar un comentario

  1. Muchas gracias

  2. exelente gracias. :D

  3. nicolas

    Esta buenisimo, pero con IExplorer no me funciona

  4. Hola,
    Si , cada vez es más popular CSS , Pero por mi opinión no es muy bonito y practico dar muchos efectos a los textos usando CSS o lo que sea. Las webs simples y con menos efectos de diseño serán siempre mas cómodas y navegables de la manera facil para las personas.

    Saludos.
    Jordi.

  5. me gusta el ultimo no es tan molestoso que los anteriores el antepenúltimo se pixelea no se si por mi navegador gracias

  6. José Miguel

    En la “Imagen que brilla” el moz-box-shadow no cumple su función y no se por qué…

    Como resultado en Firefox no hay efecto alguno.

    Saludos.

  7. Lupita Lavatrastes

    Osea qe onda necesito qe lo pongan en español xqe osea no entiendo nada xfa aparte no aparecen los codigos

Dejar un comentario