“Bump up”

Este efecto de transition:hover eleva el objeto modificando su margin-top, ideal para ser usado en lista de imagenes horizontales.

Efecto Bump Up

Código CSS Ejemplo 1

.ejemplo1 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;
}
.ejemplo1 img:hover {
margin-top: 2px;
}

“Stack & Grow”

Al activar el objeto con el cursor, esta transición aumenta su ancho y alto.

hovereffects-2

Código CSS Ejemplo 2

#contenedorEj2 {
width: 300px;
margin: 0 auto;
}

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

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

“Fade Text in”

En un div que contiene una imagen y un texto este efecto modifica el line-height de este ultimo haciendolo lucir como que cae de la imagen cuando se pasa el cursor por encima de dicha imagen.

hovereffects-3

Código CSS Ejemplo 3

#ejemplo3 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#ejemplo3:hover {
line-height: 133px;
color: #575858;
}

#ejemplo3 img{
float: left;
margin: 0 15px;
}

Some Text

“Crooked Photo”

Este texto utiliza la propiedad -transform: rotate de CSS3, haciendo que la imagen rote cuando el cursor pasa por encima de ella.
Muy buena aplicación en galería de fotos.

hovereffects-4

Código CSS Ejemplo 4

#ejemplo4 {
width: 800px;
margin: 0 auto;
}
#ejemplo4 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;
}
#ejemplo4 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
	

“Fade In and Reflect”

Este efecto utiliza la propiedad -webkit-box-reflect y por lo tanto es soportada por los navegadores Chrome y Safari.

hovereffects-5

Código CSS Ejemplo 5

#ejemplo5 {
width: 700px;
margin: 0 auto;
min-height: 300px;
}

#ejemplo5 img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;

/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

/*Reflection*/
-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)));
}

#ejemplo5 img:hover {
opacity: 1;

/*Reflection*/
-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)));

/*Glow*/
-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);
}
 

Esperamos que les sea de utilidad y hasta pronto!

Publicado por: Celia

Entradas más populares

Una respuesta para “Interesantes efectos utilizando hover transition en CSS3”

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>