Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


5 Fantásticos Efectos Hover para tus Imágenes




En otra ocasión ya publiqué en otra entrada 4 fantásticos efectos hover y ahora vengo con otras 5 demostraciones fascinantes para que lo apliques sencillamente en tus imágenes, las demostraciones que visualizaréis no están diseñadas por mi, son de Joshua Johnson de Design Shack. No he podido evitar publicar está entrada, porqué me encantan los efectos hover que aplica en las imágenes, con un poco de CSS3, imaginación y talento, lo que se puede lograr, verdad. Es increíble. Bueno vayamos a las demostraciones, no me explayo más, a continuación las demos y el código CSS Y HTML para insertar los en tus imágenes de tu blog.



ESTE EFECTO SE DENOMINA TILT:

coche

html

<div class="tiltaizum pic">
<img src="http://3.bp.blogspot.com/-F19pmUiD1WI/UnowmYW2VyI/AAAAAAAAQtY/EvGUxJ08jwc/s1600/descarga.jpg" alt="car"></div>

CSS

/*TILT*/
.tiltaizum {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.tiltaizum1:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}

Este efecto se denomina Morph:

Efectos


html

<div class="morphaizum pic">
<img src="http://3.bp.blogspot.com/-bO2x1yXTqM0/Unow1irtMlI/AAAAAAAAQtg/85YTl3x-ULs/s1600/descarga+(1).jpg" alt="Aizum Blog"></div>

CSS

/*MORPH*/
.morphaizum {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.morphaizum:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

Este efecto se denomina Focus:

Efecto Hover


HTML

<div class="focusaizum pic"><img src="http://1.bp.blogspot.com/-9SQtQaJz4rc/UnoxiW5EYYI/AAAAAAAAQto/McWScwlk9ig/s1600/descarga+(2).jpg" alt="Aizum Blog"></div>

CSS

/*FOCUS*/
.focusaizum {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.focusaizum:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

Este efecto se denomina Blur:

plane


HTML

<div class="bluraizum pic"><img src="http://4.bp.blogspot.com/-Xw-nfvcaLng/UnoyBfAcQ1I/AAAAAAAAQtw/owMjqygRfag/s1600/descarga+(3).jpg" alt="Aizum Blog"></div>

CSS

/*BLUR*/
.bluraizum img {
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 
.bluraizum img:hover {
-webkit-filter: blur(5px);
}

Este efecto se denomina Black&White:

Efecto CSS3


HTML:

<div class="bwaizum pic"><img src="http://4.bp.blogspot.com/--eYWSXBdE0U/UnoyNusdbyI/AAAAAAAAQt4/bdSN5sxWPrg/s1600/descarga+(4).jpg" alt="Mar">
</div>

CSS:

/*B&W*/
.bwaizum {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
 transition: all 1s ease;
}

.bwaizum:hover {
-webkit-filter: grayscale(100%);
}



Aizum Blog, lunes, noviembre 04, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9