Categorías: Tutorial

5 efectos con CSS3 para las imágenes de tu web

ACTUALIZACIÓN: Puedes ver también 4 efectos con CSS3 para los textos de tu web

jQuery ha sido, es y será uno de los grandes reyes para poder realizar animaciones en nuestros códigos sin necesidad de recurrir a Flash, cada vez más abandonado a su suerte, pero CSS3 (sobre todo en su conjunto con HTML5) está recortando mucho terreno y nos permite multitud de efectos geniales con unas pocas líneas en nuestras hojas de estilo. Aqui te dejamos una muestra de 6 efectos simples y llamativos para tu web.

1. Efecto Stack & Grow

Esta animación hará que al pasar el puntero por encima de la imagen se amplie tanto a lo ancho como a lo alto. El código usado es este:

img{
    height: 100px;
    width: 300px;
    margin: 15px 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

img:hover {
    height: 133px;
    width: 400px;
    margin-left: -50px;
}

2. Efecto ampliación o escalado

El más simple de todos los ejemplos de CSS3. Con este código obtenemos una pequeña ampliación de nuestra imagen al hacer hover sobre ella. Genial para catálogos de tiendas virtuales o listados de productos.

img:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}

3. Bumb up

También conocido como «el saltito», esté ejemplo modifica el margin-top de la imagen quedando destacada por encima de las demás. Una buena idea para un menú o barra de navegación.

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;
}

img:hover {
    margin-top: 2px;
}

4. Efecto Crooked photo

En este ejemplo rotamos la imagen hacia el lado izquierdo 7 grados, pero podemos personalizarlo completamente cambiando el valor «-7deg».

img {
    margin: 20px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

5. Efecto Fade in and reflect

Un dos por uno, aunque solo funciona en navegadores -webkit (como son Chrome y Safari), pero dota a las imágenes de un reflejo que siempre lo hemos tenido que trabajar con Photoshop.

img {
    margin: 25px;
    opacity: 0.8;
    border: 10px solid #eee;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}

img:hover {
    opacity: 1;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
    box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Todos los efectos que os mostramos los podéis ver en funcionamiento en esta página y podéis dejarnos cualquier sugerencia o duda relacionada o no con CSS3 en los comentarios del post.

5 efectos con CSS3 para las imágenes de tu web marzo 5th, 2024Jose Antonio Vila
Jose Antonio Vila

Desarrollando webs desde hace más de 10 años. Hace mucho que dejé atrás la vida en agencias y me abracé a la vida de freelance. 🖥 Si tienes algún proyecto en mente, contacta conmigo. 📖 Si quieres leer más cosas que escribo, echa un ojo a mi web personal

Ver Comentarios

  • Gracias por esos efectos, tienes bonita web quisiera saber si me puedes mandar el codigo para hacer tu menu y con ese efecto de enpequenecer el logo y el estilo que usaste para poner el borde con una linea orange.
    Un saludo desde Republica Dominicana

  • Estaría bueno que en la descripción de cada efecto muestres un ejemplo en funcionamiento
    Asi es mas rapido aún

  • Disculpa quiero hacer una rollback con cambio de imagen, pero solo encuentro puras guias para xhtml y lo necesito para html5 tienes algun tutorial para eso ? ya que ninguna me a funcionado

  • Quisiera saber si existe un codigo para que las personas entren a mi sitio web y en un formulario puedan adjuntar cualquier tipo de archivo y que me llegue al correo como hago necesito que me ayuden se lo agradeceria de antemano no tengo mucho conocimiento pero me encantaria aprender gracias

  • Hola estoy haciendo una renovacion en mi web y estos efectos me seran muy utiles; sin embargo, no me resulta el efecto Bomb up, solo quiero saber si esta bien el codigo que esta publicado para revisar bien lo que estoy haciendo
    gracias

  • hola una pregunta las cookies almacenan informacion para uno como dueño del sitio ? si es asi donde los almacena. gracias

Compartir
Publicado por
Jose Antonio Vila

Posts Recientes

4 efectos con CSS3 para los textos de tu web

Con el paso de los años, CSS se está haciendo cada vez más potente y… Leer más

Hace 2 años

Buenas prácticas para ser mejor programador

Al igual que un artista mejora su técnica con la práctica constante, un programador aprende… Leer más

Hace 2 años

Como mejorar la seguridad en WordPress: evita ser hackeado

WordPress es, probablemente, el mayor CMS para la creación de páginas web en el mundo.… Leer más

Hace 3 años

Mi web WordPress ha sido hackeada, ¿ahora qué hago?

Guste más o menos, Wordpress está detrás de un alto porcentaje de las webs activas… Leer más

Hace 3 años

La digitalización de Estonia: educación y brecha digital

Hoy, la gente de Xataka ha publicado un artículo muy interesante hablando de Estonia. Parece… Leer más

Hace 3 años

Como integrar Google ReCaptcha

Aunque todos lo conocemos, seguro que hay algún despistado al que lo de Google reCAPTCHA… Leer más

Hace 7 años