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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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.
|
1
2
3
4
5
6
7
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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”.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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);
}
|
bro quisiera que entrara en cepaj.cubava.cu y dime que te parece ok ??? me gusta este blog y si puedes dejame en la páginas de amigos ok ??? gracias y salu2