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
Fancy CSS3 Transitions Image Gallery
Snazzy Hover Effects Using CSS3
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
Item Blur Effect With CSS3 & jQuery
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