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.
1
2
3
4
5
6
7
8
| .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
1
2
3
4
5
6
7
8
| .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.
1
2
3
4
5
6
7
8
9
10
11
| .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.
- See more at: http://www.tutosytips.com/efecto-caption-a-imagenes-con-css3/#sthash.9u6AoRJf.dpuf
Fuente:enlace
No hay comentarios:
Publicar un comentario