Lo primero que creo debemos aprender es ahora utilizar de maneras diversas y divertidas las imagenes y transiciones sobre las imágenes que podamos tener en una pagina web, esto le podrá dar un poco de dinamismo y sobre todo un aspecto visual interesante a nuestro desarrollo.
<style>
.crossfade {
background: url(images/test2.jpg);
width:300px; height:225px;
background-size: cover;
}
.crossfade img{
transition: 3s opacity ease-out;
}
.crossfade img:hover
{opacity: 0;}
</style>
<body>
div class="crossfade";
<img src="images/test1.jpg" alt="Prueba crossfade1">
</div>
La primera transición es muy simple, como eran una imagen en este caso test2, es una imagen de background, por lo que la imagen Test1, aparece sobre ella y cuando se efectuar el efecto esta se hace transparente dejando ver la imagen de abajo .
Nota: ease-out especifica una transición con un efecto que inicia una transición a una velocidad y termina lento.
<style>
.crossfade {
position: relative;
width:300px; height:220px;
background-size: cover;
}
.crossfade img:nth-child(2)
{
position: absolute;
left:0;
top:0;
transition: 3s opacity ease-out;
}
.crossfade img:nth-child(2):hover
{opacity: 0;}
</style>
<body>
<div class="crossfade">
<img src="images/test1.jpg" alt="Prueba crossfade1">
<img src="images/test2.jpg" alt="Prueba crossfade2">
</div>
En este ejemplo utilizados una de las propiedades de CSS nth-child.
El selector: nth-child ( n ) es igual a cada elemento , independientemente del tipo de su padre, n puede ser un número , una palabra clave , o una fórmula .
Tip: Mira el : Selector – n d () para seleccionar el elemento que es el niño, de un tipo particular , de su padre, en este caso usamos el 2, ya que la imagen test2 es la que será afectada por la opacidad.
Este es un método un poco mas atrevido y creo que por el momento solo es soportado por chrome, es un elemento div vacío y todo lo maneja la hoja de estilo.
<style>
.crossfade {
width: 300px; height: 225px; transition: 3s background-image ease-out; background-image: url(images/test1.jpg);
}
.crossfade:hover{
background-image:url(images/test2.jpg);
}
</style>
<body>
<div class="crossfade">
</div>
Como crear una galería de imágenes con CSS3
Ahora con lo poco que sabemos de CSS3 y sus transiciones vamos a conocer como poder juntarlo para hacer algo interesante como es una galería de imágenes simple. Psique vamos a crear el HTML lo mas simple y fácil posible para este objetivo.
Ahora usaremos un simple modelo cd hoja de estilo donde la imagen grande se vera al momento de posicionar el mouse sobre la imagen de la lista que esta a la derecha.
El < dl > define una lista de descripciones.
El < dl> se utiliza en conjunción con < dt> (define términos / nombres) y < dd> (describe cada término / nombre) .
<style>
body{
background: #;
}
#gallery{
position:relative;
}
#gallery dt img{ width:150px; height:150px; margin: .5em;}
#gallery dd {position: absolute; left:200px; top: 2.2em; visibility:hidden;}
#gallery dt:hover + dd{ visibility: visible;}
</style>
<body>
<dl id="gallery" >
<dt> <img src="images/Test1.jpg" alt="Test1" >
<dd> <img src="images/Test1.jpg" alt="Big1" >
<dt> <img src="images/Test2.jpg" alt="Test2" >
<dd> <img src="images/Test2.jpg" alt="Big2" >
<dt> <img src="images/Test3.jpg" alt="Test3" >
<dd> <img src="images/Test3.jpg" alt="Bog3" >
</dl>
Ahora vamos a hacerle unas mejoras.
Primero vamos a darle un poco de efecto de transición con opacidad.
#gallery dd {position: absolute; left:200px; top: 2.2em; opacity:0 ;transition: .85s opacity linear;}
#gallery dt:hover + dd{ opacity:1 ;}
Ahora que tal se le agregamos algo de texto, o información adicional a las imágenes, esto es sencillo primer le agregamos texto a la lista de descripcion, específicamente a la dd de esta manera.
<dt> <img src=”images/Test1.jpg” alt=”Test1″ >
<dd> <img src=”images/Test1.jpg” alt=”Big1″ > La ardilla del parque
Y seguimos con las modificaciones en la hoja de estilo.
#gallery dd img{width:500px; height:400px; display: block; margin: auto; padding-bottom: 1.2em;}
#gallery dd {position: absolute; left:200px; top: 2.2em; opacity:0 ;transition: .85s opacity linear; text-align:center; font-family: Futura, Arial, sans-serif; color:white;}
Sin embargo la mayoría de ustedes va a pensar que es mas lógico para el usuario hacer click en la imagen para seleccionarla que solo estar encima, así que veremos unas alternativas ya que no hay en CSS un equivalente tal como lo hay en Javascript para el click.
:active
#gallery dt:active + dd{ opacity:1 ;}
Lo malo de esta opción es que si pueden ver solo funciona o se ejecuta mientras se tenga presionado el botón del mouse.
Ahora haremos los captions mas cool y animados
figure {float: left;}
figure img{
width:500;
height: 333;
overflow: hidden;
}
figcaption{
font-family:Baskerville, "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-style: italic; background: rgba(0,0,0,0.4);
font-size: 2rem; padding: 0.8rem; color: #fff;
position: relative;
bottom: 0px;
transition: 2s all;
}
figure:hover figcaption {bottom: 200px;}
</style>
<figure>
<img src="images/test3.jpg" alt="Test3">
<figcaption>Prueba de caption No 3</figcaption>
</figure>
<figure style=left:550px>
<img src="images/test2.jpg" alt="Test2">
<figcaption>Test No 2</figcaption>
</figure>
