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 CSS3. 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.

Efectos CSS gratis

Direction-Aware Hover Effect

Demo

Circle Hover Effects

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

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);
}

Entradas relacionadas de nuestro blog

50 Formularios HTML5 CSS3 gratuitos de registro / iniсio de sesión
La docena del fraile de menús CSS3 desplegables gratis
14 Profesionales Generadores CSS para Crear Diseños Inolvidables

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