Efectos hover para imágenes - BloggerS Look
Legal Web

Legalidad Web

Contacto

Cookies

Encuesta

Copyright ©
BloggerS Look

INSPITATION AND CREATIVITY IN SOCIAL NETWORKS
  • Home
    • Home CSS Efectos Efectos hover para imágenes

    Efectos hover para imágenes

    Share This

    por | Mar 24, 2015 | CSS, Diseño, html | 8 Comentarios
    Las animaciones para revelar titulos y descripciones al hacer hover a una imagen, nos ayudan a dar dinamismo a nuestra web; logrando mostrar mas contenido en menos espacio.
    Para realizar estas animaciones nos valdremos de propiedades css3, tales como “transform y transition”.
    La estructura html básica a usar sería de un contenedor que abarque la “imagen” y el “cover o máscara” con el titulo la descripción y el link.
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="contenedor-img">
    <img src="imgejemplo.jpg" alt="" />
    <div class="mascara">
    <h2>Ejemplo</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam in ullamcorper malesuada.</p>
    <a class="link" href="#">Leer mas</a>
    </div>
    </div>
    A esta estructura base tenemos que asignar estilos para que la máscara quede sobre la imagen. Asignamos un width y height a nuestro contenedor, así como overflow:hidden para esconder todo lo que este fuera.
    A la máscara le ponemos position:absolute para que quede encima de la imagen; también asignaremos estilos al titulo, descripción y link para que se acomoden.
    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    /*Estilos Base*/
    .contenedor-img {
    width: 300px;
    height: 200px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    background: #fff;
    }
    .contenedor-img .mascara,.contenedor-img .contenido {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
    }
    .contenedor-img img {
    display: block;
    position: relative;

    }
    .contenedor-img h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.9);
    margin: 20px 0 0 0
    }
    .contenedor-img p {
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 10px;
    text-align: center
    }
    .contenedor-img a.link {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #222;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
    }
    .contenedor-img a.link:hover {
    box-shadow: 0 0 5px #000
    }
    Con esta estructura base vamos a mostrar distintas animaciones simples y vistosas para revelar el titulo y la descripción.

    Ejemplo 1

    Para este caso haremos que al hacer hover a la imagen el titulo entre por la derecha, la descripción por la izquierda y el link por abajo.
    ejm1
    Usaremos la siguiente estructura, la cual es solo agregar la clase “ejemplo-1” al contenedor:
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="contenedor-img ejemplo-1"> 
         <img src="imgejemplo.jpg" /> 
         <div class="mascara"> 
             <h2>Ejemplo 1</h2> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
             <a href="#" class="link">Leer mas</a> 
         </div> 
    </div>
    Para dar las animaciones usaremos “transition: ease-in-out”, “transform” con “translateX(Xpx)” y “translateY(Ypx)”. Con translateX nosotros podremos desplazar a la derecha o izquierda(valores negativos desplazan a la izquierda), con translateY desplazamos hacia arriba o hacia abajo (valores negativos desplazan hacia arriba).
    El titulo lo desplazamos a la izquierda para ello asignamos “translateX(-200px)”, a la descripcion la movemos a la derecha “translateX(200px)” y al link lo bajamos “translateY(100px)”.
    Con el hover todos ellos deben regresar a su posición original; así que ponemos transform: translateX(0px) y transform: translateY(0px).
    Para que se la animación se vea suave la usaremos opacity:0; el cual le dará un pequeño fundido al mostrarse.
    Los estilos quedarían:
    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
    39
    40
    41
    42
    43
    /*Ejemplo 1*/
    .ejemplo-1 img {
    transition: all 0.2s linear;
    }
    .ejemplo-1 .mascara {
    opacity: 0;
    background-color: rgba(46,157,120, 0.7);
    transition: all 0.3s ease-in-out;
    }
    .ejemplo-1 h2 {
    transform: translateX(-200px);/*Desplazamos a la izquierda*/
    opacity: 0;
    transition: all 0.7s ease-in-out;
    }
    .ejemplo-1 p {
    transform: translateX(200px);/*Desplazamos a la derecha*/
    opacity: 0;
    transition: all 0.4s linear;
    }
    .ejemplo-1 a.link{
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: translateY(100px)/*Desplazamos para abajo*/
    }
    .ejemplo-1:hover img {
    transform: scale(1.1);/*Damos un ligero zoom a la imagen*/
    }
    .ejemplo-1:hover .mascara {
    opacity: 1;
    }
    .ejemplo-1:hover h2,
    .ejemplo-1:hover p,
    .ejemplo-1:hover a.link {
    opacity: 1;
    transform: translateX(0px);/*Regresamos a las posiciones originales*/
    }
    .ejemplo-1:hover p {
    transition-delay: 0.1s;
    }
    .ejemplo-1:hover a.link {
    transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se muestre al final*/
    transform: translateY(0px);
    }
    Para ver la demo AQUÍ

    Ejemplo 2

    En este ejemplo, al hover el background de la máscara entrara en diagonal desde la esquina inferior derecha, el titulo desde la esquina superior derecha y la descripción de la esquina inferior izquierda.
    ejm2
    En este caso tendremos que modificar un poco el HTML, separaremos el mascara del título, descripcion y link; y los agruparemos en un contenedor llamado “contenido”
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="contenedor-img ejemplo-2"> 
         <img src="test.jpg" /> 
         <div class="mascara"></div>
         <div class="contenido">
             <h2>Ejemplo 2</h2> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
             <a href="#" class="link">Leer mas</a> 
         </div>
    </div>
    Para crear ese efecto de la máscara en diagonal, la rotaremos 45 grados “rotate(45deg)” y la moveremos por donde queremos que aparezca, en este caso esquina inferior derecha para ello usaremos “translate(Xpx, Ypx)”. Para el hover usaremos “transform: translate(-96px, -120px)” estos valores van a variar dependiendo del tamaño de la imagen.
    En el titulo y la descripción asignamos “transform: translate(200px, -200px);” y “transform: translate(-200px, 200px);” respectivamente. Para el hover “transform: translate(0px,0px);” con lo que los regresaremos a su posición original.
    También usaremos “transition-delay” para que se muestre uno a uno cada elemento y no todos a la vez.
    Los estilos quedarían:
    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
    39
    40
    41
    42
    43
    44
    45
    /*Ejemplo 2*/
    .ejemplo-2 img {
    transition: all 0.2s ease-in;
    }
    .ejemplo-2 .mascara {
    background-color: rgba(25,96,184, 0.8);
    width: 300px;
    padding: 60px;
    height: 300px;
    opacity: 1;
    transform: translate(300px, 200px) rotate(45deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
    transition: all 0.5s ease-in-out;
    }
    .ejemplo-2 h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(200px, -200px);/*Desplazamos el título arriba a la derecha*/
    transition: all 0.3s ease-in-out;
    }
    .ejemplo-2 p {
    transform: translate(-200px, 200px);/*Desplazamos la descripción abajo a la izquierda*/
    transition: all 0.4s ease-in-out;
    }
    .ejemplo-2 a.link {
    transform: translate(0px, 100px);/*Desplazamos el link para abajo*/
    transition: all 0.3s 0.1s ease-in-out;
    }

    .ejemplo-2:hover .mascara {
    opacity:1;
    transform: translate(-96px, -120px) rotate(45deg);
    }
    .ejemplo-2:hover h2 {
    transform: translate(0px,0px);
    transition-delay: 0.3s;
    }
    .ejemplo-2:hover p {
    transform: translate(0px,0px);
    transition-delay: 0.4s;
    }
    .ejemplo-2:hover a.link {
    transform: translate(0px,0px);
    transition-delay: 0.5s;
    }
    Para ver la demo AQUÍ

    Ejemplo 3

    Para este ejemplo haremos el efecto de la máscara empujando a la imagen.
    ejm3
    Usaremos la siguiente estructura, la cual es solo agregar la clase “ejemplo-3” al contenedor:
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="contenedor-img ejemplo-3"> 
         <img src="test.jpg" /> 
         <div class="mascara">
             <h2>Hover Effects</h2> 
             <p>Efectos hover para tus imágenes, portafolio, galerias.</p>
             <a href="#" class="link">Ver más</a> 
         </div>
    </div>
    Para lograr este efecto moveremos la máscara a la izquierda “transform: translateX(-300px);” y en el hover la regresaremos a su lugar “transform: translateX(0px);”, la imagen en el hover la desplazaremos a la derecha “transform: translateX(300px);”.
    Los estilos quedarían:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    /*Ejemplo 3*/
    .ejemplo-3 img {
    transition: all 0.4s ease-in-out;
    }
    .ejemplo-3 .mascara {
    background-color: rgba(128,96,0,0.5);
    transform: translateX(-300px);/*Desplazamos 300px a la izquierda*/
    opacity: 1;
    transition: all 0.4s ease-in-out;
    }
    .ejemplo-3 h2{
    background: rgba(255, 255, 255, 0.3);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
    }
    .ejemplo-3 p{
    color: #333;
    }
    .ejemplo-3:hover .mascara {
    transform: translateX(0px);/*Regresamos a su posicioón original*/
    }
    .ejemplo-3:hover img {
    transform: translateX(300px);/*Desplazamos 300px a la derecha*/
    }
    Para ver el ejemplo AQUÍ

    Ejemplo 4

    En este ejemplo haremos zoom-out a la imagen y la máscara entrara girando 180grados.
    ejm4
    Usaremos el siguiente html:
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="contenedor-img ejemplo-4"> 
         <img src="imgejemplo.jpg" /> 
         <div class="mascara">
             <h2>Ejemplo 4</h2> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
             <a href="#" class="link">Leer mas</a> 
         </div>
    </div>
    A la imagen le asignaremos “transform: scale(0);” para que haga zoom-out, la máscara empezará rotada y de tamaño 0 “transform: scale(0) rotate(-180deg);” y al hover lo regresaremos a su estado original “transform: scale(1) rotate(0deg);”
    Los estilos quedarían:
    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
    39
    40
    41
    42
    43
    .ejemplo-4 img {
    transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
    }
    .ejemplo-4 .mascara {
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    transform: scale(0) rotate(-180deg);/*Rotamos 180grados y le damos tamaño 0*/
    transition: all 0.4s ease-in;
    border-radius: 0px;
    }
    .ejemplo-4 h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: all 0.5s ease-in-out;
    }
    .ejemplo-4 p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    }
    .ejemplo-4 a.link {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    }

    .ejemplo-4:hover .mascara {
    opacity: 1;
    transform: scale(1) rotate(0deg);/*Regresamos a su tamaño y posición original*/
    transition-delay: 0.2s;
    }
    .ejemplo-4:hover img {
    transform: scale(0); /*Efecto zoom-out*/
    opacity: 0;
    transition-delay: 0s;
    }
    .ejemplo-4:hover h2,
    .ejemplo-4:hover p,
    .ejemplo-4:hover a.link{
    opacity: 1;
    transition-delay: 0.5s;
    }
    Nosotros podemos controlar desde que zona queremos que se produzca el efecto, para ello usamos “transform-origin:X Y;”. Con unas pequeñas modificaciones haremos que la imagen desaparezca desde una esquina y la máscara aparezca desde la otra.
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="contenedor-img ejemplo-4-1"> 
         <img src="imgejemplo.jpg" /> 
         <div class="mascara">
             <h2>Ejemplo 4-1</h2> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
             <a href="#" class="link">Leer mas</a> 
         </div>
    </div>
    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
    39
    40
    41
    42
    43
    44
    45
    /*Ejemplo 4-1*/
    .ejemplo-4-1 img {
    transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
    transform-origin:100% 100%; /*Desde la esquina inferior derecha*/
    }
    .ejemplo-4-1 .mascara {
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    transition: all 0.4s ease-in-out 0.2s;
    transform-origin:0% 0%; /*Desde la esquina superior izquierda*/
    transform: scale(0);
    }
    .ejemplo-4-1 h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: all 0.5s ease-in-out;
    }
    .ejemplo-4-1 p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    }
    .ejemplo-4-1 a.link {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    }

    .ejemplo-4-1:hover .mascara {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.3s;
    }
    .ejemplo-4-1:hover img {
    transform: scale(0);
    opacity: 0;
    transition-delay: 0s;
    }
    .ejemplo-4-1:hover h2,
    .ejemplo-4-1:hover p,
    .ejemplo-4-1:hover a.link{
    opacity: 1;
    transition-delay: 0.5s;
    }
    Para ver el ejemplo AQUÍ

    Ejemplo 5

    En este ejemplo haremos zoom con fade el cual dará el efecto de que la imagen se transforma en la máscara.
    ejm5
    El html a usar:
    1
    2
    3
    4
    5
    6
    7
    8
    <div class="contenedor-img ejemplo-5"> 
         <img src="imgejemplo.jpg" /> 
         <div class="mascara">
             <h2>Ejemplo 5</h2> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
             <a href="#" class="link">Leer mas</a> 
         </div>
    </div>
    Para dar el efecto usaremos scale y opacity.
    A la imagen le asignaremos “transform: scale(10); y “opacity: 0;” en el hover. A la máscara de “opacity:0” a “opacity:1” en el hover. Para el título, descripción y link les asignaremos, “transform: scale(0); y opacity:0;” y en el hover “transform: scale(1); y opacity:1;”
    Los estilos quedarían:
    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
    39
    40
    41
    42
    43
    44
    45
    46
    /*Ejemplo 5*/
    .ejemplo-5 img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;

    }
    .ejemplo-5 .mascara {
    background-color: rgba(119, 80, 21, 0.9);
    transition: all 0.5s linear;
    opacity: 0;
    }
    .ejemplo-5 h2{
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #fff;
    transition: all 0.5s linear;
    opacity: 0;
    }
    .ejemplo-5 p {
    color: #fff;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
    }
    .ejemplo-5 a.link {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
    background-color: rgba(119, 80, 21, 0.9);
    }

    .ejemplo-5:hover img {
    transform: scale(10);
    opacity: 0;
    }
    .ejemplo-5:hover .mascara {
    opacity: 1;
    }
    .ejemplo-5:hover h2,
    .ejemplo-5:hover p,
    .ejemplo-5:hover a.link{
    transform: scale(1);
    opacity: 1;
    }
    Para ver el ejemplo AQUÍ
    Para ver todos los ejemplos juntos AQUÍ
    [social-download button_id=”a8357ad76c6889d3f” dl_id=”http://www.miguelmanchego.com/samples/2015/hovereffects/hovereffects.zip” theme=”blue” message=”Comparte el post para descargar todos los archivos de los ejemplos” facebook=”true” likeurl=”CURRENT” google=”true” googleurl=”CURRENT” tweet=”true” tweettext=” @xlogus” tweeturl=”CURRENT” follow=”true” linkedin=”true” linkedinurl=”CURRENT”/]
    Tags
    Share This
    Author Image

    About G&C.Publicaciones

    By �s
    Marcadores: ,

    No hay comentarios:

    Publicar un comentario

    Suscribirse a: Enviar comentarios (Atom)

    ¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

    MANDALES POR CORREO EL LINK DE ESTE BLOG PARA QUE NOS CONOZCAN

    Share to Facebook Share to Twitter Email This Pin This Share on Google Plus Más...

    Author Details

    Templatesyard is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates which are professionally designed and perfectlly seo optimized to deliver best result for your blog.

    Vistas de página en total