00 days
:
00 hours
:
00 minutes
:
00 seconds

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.

Efectos hover CSS3 gratis

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.


UI elements banner

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



Diane Parks

Diane trabja como una redactora del blog MonsterPost España desde hace muchos años. No imagina su vida sin escribir, aprender algo nuevo cada día, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. ¡Síguela en Facebook!