Ya habia tardao en publicar un tutorial, pero la espera es buen.
En esta ocacion les traigo un solo ejemplo de hacer multiples hover a un solo elemento y de que posicion queremos que inicie el evento hover.
Ocuparemos 5 imagenes una de ellas el logo del nuestro sitio web y las otras cuatro para hacer el evento hover.
La imagen que ven al inicio del post ahi estamos ocupando 2 imagenes una etiqueta span la que dice "abajo - PortalWordpress.blogspot.com".
Les explico un poco como funciona, tenemos una imagen, ubiquemosnos abajo de la imagen y lo movemos verticalmente hasta llegar el mouse encima y se realiza el evento y nuestra segunda imagen trasladarse o moverse verticalmente o de abajo hacia arriba.
Si hacemos lo mismo acercandonos desde la dereche la otra imagen comenzara su recorrido horizontalemten de derecha a izquierda.
Index
Como es de costumbre tenemos nuestra estructura html utilizaremos 2 div una con ID=wrapper y el otro con la class=posicion-hover el primero sera el contenedor principal y el segundo tendra en su interior los 4 span y la imagen.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Multiple tipo de hover</title>
<link rel="stylesheet" href="estilo7.css">
</head>
<body>
<div id="wrapper">
<div class=posicion-hover>
<span>derecha- PortalWordpress.blogspot.com </span>
<span>arriba- PortalWordpress.blogspot.com</span>
<span>izquierda- PortalWordpress.blogspot.com </span>
<span>abajo - PortalWordpress.blogspot.com</span>
<img src="images/logo.jpg">
</div>
</div>
</body>
</html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Multiple tipo de hover</title>
<link rel="stylesheet" href="estilo7.css">
</head>
<body>
<div id="wrapper">
<div class=posicion-hover>
<span>derecha- PortalWordpress.blogspot.com </span>
<span>arriba- PortalWordpress.blogspot.com</span>
<span>izquierda- PortalWordpress.blogspot.com </span>
<span>abajo - PortalWordpress.blogspot.com</span>
<img src="images/logo.jpg">
</div>
</div>
</body>
</html>
CSS
/*
El contenedor principal tendra un alto=494px y ancho fijo=409px, lo ubicamos al centro de nuestro navegador para un aspecto.*/
#wrapper
{
width: 409px;
height: 494px;
margin: 0 auto;
}
/*Nuestro segundo div tiene un overflow hidden para contener y que no muestre su contenido de las imagenes y los span el vertical-align unicamente alinea los texto o span dejandolos en el centro tendra un ancho total del contenedor principal y un alto el mismo de la imagen
/* el contenedor y la imagen */
div.posicion-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 494px;
line-height: 358px;
}
Esto nos indica que toda etiqueta img o toda imagen dentro del segundo div tendra un tamaño del 100%* div.posicion-hover img
{
width: 100%;
}
A la etiqueta span le damos un color blanco negrita y el estilo de letra verdana con un tamaño de 15px ustedes le pueden agregamas, con el efeecto de transiciont de 2segundo logra que haga el evento que la imagen que se esta mostrando comieza con una trasparencia al transcurrir los 2segundo queda en su estado normal ocultando en su totalidad la imagen de fondo.
El contenedor principal tendra un alto=494px y ancho fijo=409px, lo ubicamos al centro de nuestro navegador para un aspecto.*/
#wrapper
{
width: 409px;
height: 494px;
margin: 0 auto;
}
/*Nuestro segundo div tiene un overflow hidden para contener y que no muestre su contenido de las imagenes y los span el vertical-align unicamente alinea los texto o span dejandolos en el centro tendra un ancho total del contenedor principal y un alto el mismo de la imagen
/* el contenedor y la imagen */
div.posicion-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 494px;
line-height: 358px;
}
Esto nos indica que toda etiqueta img o toda imagen dentro del segundo div tendra un tamaño del 100%* div.posicion-hover img
{
width: 100%;
}
A la etiqueta span le damos un color blanco negrita y el estilo de letra verdana con un tamaño de 15px ustedes le pueden agregamas, con el efeecto de transiciont de 2segundo logra que haga el evento que la imagen que se esta mostrando comieza con una trasparencia al transcurrir los 2segundo queda en su estado normal ocultando en su totalidad la imagen de fondo.
div.posicion-hover span
{
color: #FFF;
font-family: verdana;
font-weight: bold;
font-size: 15px;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: linear 2s ;
-webkit-transition: linear 2s;
-o-transition: linear 2s ;
-moz-transition: linear 2s ;
width: 100%;
}
/*Aqui seleccionamos el span y le agregamos una imagen o un color movelo 90% hacia la izquierda y haci es en todos los span*/
div.posicion-hover span:nth-child(1) { /* desde la derecha */
/*background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);*/
background:url(images/derecha.jpg);
left: 90%;
top: 0;
}
div.posicion-hover span:nth-child(2) { /* desde arriba */
/*background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);*/
background: url(images/arriba.jpg);
left: 0;
top: -80%;
}
div.posicion-hover span:nth-child(3) { /* desde la izquierda */
/*background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);*/
background: url(images/izq.jpg);
left: -90%;
top: 0;
}
div.posicion-hover span:nth-child(4) { /* desde abajo */
/*background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);*/
background: url(images/abajo.jpg);
left: 0;
top: 80%;
}
/* los hacemos visibles ... */
div.posicion-hover span:hover
{
opacity: 1;
}
/*Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas para realizar selecciones avanzadas:
li:nth-child(2n+1) { ... }selecciona todos los elementos impares de una lista
li:nth-child(2n) { ... }selecciona todos los elementos pares de una lista */
/* ... moviéndolos horizontalmente ... */
div.posicion-hover span:nth-child(2n+1):hover
{
left: 0;
}
/* ... o verticalmente ... */
div.posicion-hover span:nth-child(2n):hover
{
top: 0;
}
{
color: #FFF;
font-family: verdana;
font-weight: bold;
font-size: 15px;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: linear 2s ;
-webkit-transition: linear 2s;
-o-transition: linear 2s ;
-moz-transition: linear 2s ;
width: 100%;
}
/*Aqui seleccionamos el span y le agregamos una imagen o un color movelo 90% hacia la izquierda y haci es en todos los span*/
div.posicion-hover span:nth-child(1) { /* desde la derecha */
/*background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);*/
background:url(images/derecha.jpg);
left: 90%;
top: 0;
}
div.posicion-hover span:nth-child(2) { /* desde arriba */
/*background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);*/
background: url(images/arriba.jpg);
left: 0;
top: -80%;
}
div.posicion-hover span:nth-child(3) { /* desde la izquierda */
/*background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);*/
background: url(images/izq.jpg);
left: -90%;
top: 0;
}
div.posicion-hover span:nth-child(4) { /* desde abajo */
/*background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);*/
background: url(images/abajo.jpg);
left: 0;
top: 80%;
}
/* los hacemos visibles ... */
div.posicion-hover span:hover
{
opacity: 1;
}
/*Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas para realizar selecciones avanzadas:
li:nth-child(2n+1) { ... }selecciona todos los elementos impares de una lista
li:nth-child(2n) { ... }selecciona todos los elementos pares de una lista */
/* ... moviéndolos horizontalmente ... */
div.posicion-hover span:nth-child(2n+1):hover
{
left: 0;
}
/* ... o verticalmente ... */
div.posicion-hover span:nth-child(2n):hover
{
top: 0;
}
No hay comentarios :
Publicar un comentario