You are here
Efecto caption a Imágenes con CSS3. ¡ Descubre cómo! Sin categoría 

Efecto caption a Imágenes con CSS3. ¡ Descubre cómo!

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..
caption-css3
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.
caption-css-parte-html

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.
proceso-caption-css3
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

Related posts

Comments

Leave a Comment


*