Efectos hover de CSS3 gratuitos para copiar y pegar

CSS es una tecnología increíble y con su ayuda puedes crear cosas realmente sorprendentes. Aprovechando 'todo ese poder', puedes añadir cualquier tipo de efectos visuales a tu recurso. Por lo tanto, hoy hablaremos sobre los efectos de hover de imágenes creados con CSS. Hemos preparado una colección de tutoriales para que puedas agregar un poco de movimiento a tus diseños.

El hovering de imágenes se puede aplicar a cualquier imagen en tu blog o sitio, simplemente añade un par de líneas de código a tu archivo de CSS. Estos efectos definitivamente sorprenderán a tus visitantes. Todo lo que se necesita es pasar el cursor del ratón sobre una imagen y ocurre el milagro. Es hora de dejar de hablar y echar un vistazo a los ejemplos que hemos escogido para ti. Disfruta de estos tutoriales y no dudes en utilizar estos excelentes efectos.

***

Direction-Aware Hover Effect

Demo

***

Circle Hover Effects

Demo

***

Magnifying Glass Overlay

Demo

***

CSS3 Image Hover Effects

Demo

***

Fancy CSS3 Transitions Image Gallery

Demo

***

Snazzy Hover Effects Using CSS3

Demo

***

Popout Details on Hover CSS3

Demo

***

6 Image Captions

Demo

***

5 CSS Hover Effects You Will Love To Use

Demo

***

Fastest CSS Image Mouseover Effect

1
2
3
4
5
6
7
8
9
10
a.cssmouseover {
display:block;
width:200px;
height:300px;
background-image:url(pathto/image.jpg);
background-position:0px 0px;
}
a.cssmouseover:hover {
background-position:0px -300px;
}

***

jQuery Zoom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Example:
$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});
 
// Using Colorbox with Zoom
$(document).ready(function(){
  $('a.photo').zoom({
    url: 'photo-big.jpg', 
    callback: function(){
      $(this).colorbox({href: this.src});
    }
  });
});

***

PROXIMITY EFFECT WITH JQUERY AND CSS3

Demo

***

Item Blur Effect With CSS3 & jQuery

Demo

***

Fast Hover Slideshow

Demo

***

IMAGE HIGHLIGHTING AND PREVIEW WITH JQUERY

1
2
3
4
5
6
7
8
9
10
11
.ih_overlay{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background:#000;
    z-index:10;
    opacity:0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

***

Fuente: "Free CSS3 Hover Effects to Copy and Paste" por Alex Bulat