Muchas veces queremos mostrar cierta información asociada a algún grafico o imagen, y la mejor opción es utilizar la técnica Caption, esta nos permitirá hacer la descripción, hacer algún tipo de referencia o simplemente agregar algunos títulos. Con CSS Y algunas características de CSS3 podemos hacer esta experiencia un poco mas animada e interactiva, en este tutorial veremos como hacer un efecto caption a nuestras imágenes, que podemos utilizar para mostrar en nuestro portafolio, mostrar productos etc..
ok, vamos a comenzar.
EL HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ul class="contnedor caption">
<li>
<figure>
<div><img src="images/proyecto1.jpg" alt="music image"></div>
<figcaption>
<h3>Poyecto 1</h3>
<span>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</span>
<a href="" class="btn_hover">Visitar</a>
</figcaption>
</figure>
</li>
</ul>
|
El código HTML es básico y fácil de entender, tenemos una lista
<ul> asociada a dos clases dentro tenemos los respectivos
<li> dentro tenemos la etiqueta
<figure> de html5 que es la encargada de contener todo el contenido a mostrar, después tenemos un <div> y dentro de el mostramos la imagen
<img>, aparte tenemos la etiqueta
<figcaption> donde mostraremos la información adicional es decir el caption, dentro de el tenemos un titulo en
<h3> un
<span> para mostrar el texto y un enlace
<a>. Esto es básicamente todo, claro aun falta los CSS.
LOS CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.contnedor {
padding: 20px 20px 100px 20px;
max-width: 1200px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.contnedor li {
display: inline-block;
width: 363px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}
|
los anteriores fueron los del contenedor principal, es decir la <ul> y el/los <li>, le damos las proporciones y dimensiones en las que se van mostrar, los <li> que al final será cada imagen la mostramos con display: inline-block por si tenemos muchas se ubicaran una al lado de la otra, con un ancho de 363px para que encajen de a tres por líneas en caso de tener varias.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
.contnedor figure {
margin: 0;
position: relative;
}
.contnedor figure img {
max-width: 100%;
display: block;
position: relative;
}
.contnedor figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #666666;
color: #ed4e6e;
}
figcaption span {
color: #DDDDDD;
display: block;
font-size: 13px;
margin: 12px 0;
}
.contnedor figcaption h3 {
border-bottom: 1px solid #777777;
color: #FFFFFF;
margin: 0;
padding: 0 0 5px;
}
.contnedor figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #31a7c4;
color: #fff;
}
|
Aplicamos los estilos de cada elemento que compone el ítem, es decir, la etiqueta figure, la imagen, la etiqueta figcaption el texto que está dentro de un span, el h3 y el enlace, estos son estilos para que se vean bien y para posicionarlos, hasta ahora esto es lo que vemos.
aplicamos un poco de perspectiva con la propiedad perspective y perspective-origin, con esto determinamos la intensidad del efecto 3d y cambiar la posición de origen interior del elemento que tendrá efecto 3d.
|
|
.caption li {
-webkit-perspective: 1800px;
-moz-perspective: 1800px;
perspective: 1800px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 0%;
perspective-origin: 0 0%;
}
|
Básicamente le decimos al navegador que estamos trabajando con características 3d y por ahora ocultamos el div que tenemos dentro de figure
|
|
.caption figure {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.caption figure > div {
overflow: hidden;
}
|
Aplicamos animación a la imagen dentro del item, le decimos que se mueva 23% de su ubicación en el eje x con la propiedad translateX, esta se moverá de izquierda a derecha y tendrá una transición que aplicamos con la propiedad transition.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.caption figure img {
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.caption figure:hover img
{
-webkit-transform: translateX(23%);
-moz-transform: translateX(23%);
-ms-transform: translateX(23%);
transform: translateX(23%);
cursor: pointer;
}
|
Ajustamos la altura al 100% de nuestro caption y lo dejamos invisible con la propiedad opacity en 0, con backface-visibility: hidden nos aseguramos que al momento de girar el elemento en efecto 3d la otra cara del elemento quede oculta ya que lo estamos rotundo -90 grados y en su punto de origen lo dejamos en 0 0. Luego en el estado hover, es decir cuando situé el mouse sobre el lo hacemos totalmente visible cambiando su opacidad, cambiamos la rotación y aplicamos la transición a todos los cambios para dar la sensación de movimiento.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
.caption figcaption {
height: 100%;
width: 50%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.caption figure:hover figcaption{
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
|
Y finalmente aplicamos los estilos al enlace que esta dentro del figcaption que al final será un boton que tendrá un enlace, lo posicionamos absolutamente y aplicamos estilos de background y transicion en el estado hover.
|
|
.caption figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}
.btn_hover:hover {
background: #3fc7e8;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}
|
Y eso es todos, tenemos listo nuestro efecto caption con css3 para utilizar en proyectos, para mostrar nuestro portafolio personal, mostrar información de productos etc.
Espero que este ejercicio y tutorial te sirva para algo. Nos vemos en otro tutosytips.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
No hay comentarios:
Publicar un comentario