Bueno amigos en este Post les mostrare 5 propiedades llamadas Hovers.
Definición de Hover:Hover es una propiedad de CSS3 que realiza una acción al pasar el cursor por arriba de cierto elemento definido en la hoja de estilo.
Empecemos con los hover:
Hover 1-Efecto “Bump up” :
Excelente para usar una lista de imágenes horizontal, lo que hace es elevar el elemento
modificando el margin-top.
Ejemplo:
Demo
Codigo HTML:
[color=#000000][color=#000000] <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Titulo de la pagina</title>
<link rel="stylesheet" type="text/css" media="screen" href="Dirección hoja de estilo "/>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--Example-->
<div class="ex1">
<img src="Dirección imagen 1">
<img src="Dirección imagen2">
<img src="Dirección imagen3">
<img src="Dirección imagen4">
</div>
</body>
</html>
[/color][/color]
Una vez que tengamos eso procederemos a crear el estilo donde ponemos lo siguiente:
[color=#000000][color=#000000]
.ex1 img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.ex1 img:hover {
margin-top: 2px;
}
[/color][/color]
En este estilo lo que definimos es que las etiquetas img contenidas en el div class: ex1 tengan un borde de 5px solido y de color gris (#ccc), que este "flotando" a la izquierda con un margen de 15px.
Después tenemos definido el hover que dice que cuando pasemos el cursor por arriba de esa imagen suba 2px en respecto a donde esta ubicada normalmente.
Hover 2-Efecto “Stack & Grow”:
Al pasar el cursor por encima de la imagen, esta aumenta su anchura y altura mediante una transición CSS.
Ejemplo:
Demo
Codigo HTML:
[color=#000000][color=#000000]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Efecto “Stack & Grow”</title>
<link rel="stylesheet" type="text/css" media="screen" href="Dirección hoja de estilo "/>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--Example-->
<div id="containerEx2">
<div id="ex2">
<img src="Dirección imagen 1">
<img src="Dirección imagen2">
<img src="Dirección imagen3">
<img src="Dirección imagen4">
</div>
</div>
</body>
</html>
[/color][/color]
Proseguimos con el estilo:
[color=#000000][color=#000000]
#containerEx2 {
width: 300px;
margin: 0 auto;
}
#ex2 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
[/color][/color]
En este estilo definimos el ancho, alto y margen de la imagen en estilo normal y después lo agrandamos cambiando los px en el :hover.
Hover 3-Efecto “Fade Text in”:
Este efecto es bastante interesante, es un div que contiene una imagen y un texto,
primero se alinea la imagen a la izquierda y al div contenedor se le definen las propiedades line-height: 0px y color: transparent,
para que cuando el cursor pase por la imagen, esto cambie de manera animada, dando el efecto que el texto cae.
Ejemplo:
Demo
Codigo HTML:
[color=#000000][color=#000000]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Efecto “Fade Text in”</title>
<link rel="stylesheet" type="text/css" media="screen" href="Direccion del estilo"/>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>Hover Over the Image</h1>
<div id="ex3">
<img src="Dirección de la imagen"><p>Acá el texto que queres que "caiga"</p>
</div>
</body>
</html>
[/color][/color]
Ahora el estilo:
[color=#000000][color=#000000]
#ex3 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family:#"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex3:hover {
line-height: 133px;
color: #575858;
}
#ex3 img{
float: left;
margin: 0 15px;
}
[/color][/color]
En este estilo se define el color de y la anchura del texto, que después se cambian para que "aparezca" en el hover.
Hover4-Efecto “Crooked Photo”(Ya va el ante ultimo) :
Ideal para una galería de fotos, este efecto usa la propiedad CSS3 -transform: rotate, hace que cuando el
cursor pase por la imagen esta gire 7 grados a la izquierda.
Ejemplo:
Demo
Codigo HTML:
[color=#000000][color=#000000]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Efecto “Crooked Photo”</title>
<link rel="stylesheet" type="text/css" media="screen" href="estilo4.css"/>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="ex4">
<img src="Dirección imagen 1">
<img src="Dirección imagen2">
<img src="Dirección imagen3">
<img src="Dirección imagen4">
<img src="Dirección imagen 5">
<img src="Dirección imagen6">
</div>
</body>
</html>
[/color][/color]
El código CSS3:
[color=#000000][color=#000000]
#ex4 {
width: 800px;
margin: 0 auto;
}
#ex4 img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex4 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
[/color][/color]
En esta ocasión la hoja de estilo se utiliza para marcar el grado de rotacion de la imagen y el borde de cada imagen.
Bueno amigos este ya es el ultimo hover :
Hover 5-Efecto “Fade In and Reflect”:
Este efecto solo es compatible con navegadores -webkit, ya que usa la propiedad -webkit-box-reflect, que solo es soportada por Chrome y Safari,
de igual manera se ve bastante bien(En otros navegadores le quita un poco de luz).
Demo
Codigo HTML:
[color=#000000][color=#000000]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Efecto “Fade In and Reflect”</title>
<link rel="stylesheet" type="text/css" media="screen" href="estilo5.css"/>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="containerEx5">
<div id="ex5">
<img src="Dirección imagen 1">
<img src="Dirección imagen2">
<img src="Dirección imagen3">
<img src="Dirección imagen4">
<img src="Dirección imagen 5">
<img src="Dirección imagen6">
<img src="Dirección imagen7">
<img src="Dirección imagen8">
</div>
</div>
</body>
</html>
[/color][/color]
El ultimo Estilo:
[color=#000000][color=#000000]
#containerEx5 {
background : none repeat scroll 0 0 #333333;
margin: 50px 0;
min-height: 100%;
padding: 20px;
}
#ex5 img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
#ex5 img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
[/color][/color]
En este estilo se define el color, el lugar, el reflejo de la imagen(solo en -webkit- ) y el esparcimiento de la luz.
Cualquier Duda contactame por MP.
Si te gusto Recomendalo o comenta.
Si te gustan mis aportes Seguime
