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:

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:

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:

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:

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:
&W;
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%);
}

Eso es todo, espero que os guste estos 5 efectos para tus imágenes, para vuestro blog o web, si tenéis alguna duda comentar, sois bienvenidos, responderé con la mayor brevedad posible. Sí deseáis, no os olvidéis de hacer clic en los banners de publicidad, es la única manera de agradecer y contribuir económicamente, para sostener está pagina web. Gracias por su colaboración. Enjoy this tip!

Get free premium widgets for your blog and website.