Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 143 vistas

    Efecto Hover CSS3

    Cargado por

    oscar pimentel
    Este documento describe cómo crear efectos hover para imágenes en CSS3 mediante el uso de propiedades como transform y transition. Explica una estructura HTML básica con un contenedor que envuelve la imagen y una máscara con el título, descripción y enlace. A continuación, proporciona los estilos CSS para posicionar la máscara sobre la imagen y animar el título, descripción y enlace para revelarse al pasar el mouse sobre la imagen.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Efecto Hover CSS3

    Cargado por

    oscar pimentel
    143 vistas3 páginas
    Este documento describe cómo crear efectos hover para imágenes en CSS3 mediante el uso de propiedades como transform y transition. Explica una estructura HTML básica con un contenedor que envuelve la imagen y una máscara con el título, descripción y enlace. A continuación, proporciona los estilos CSS para posicionar la máscara sobre la imagen y animar el título, descripción y enlace para revelarse al pasar el mouse sobre la imagen.

    Descripción original:

    efecto hover csss3 para paginas web

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento describe cómo crear efectos hover para imágenes en CSS3 mediante el uso de propiedades como transform y transition. Explica una estructura HTML básica con un contenedor que envuelve la imagen y una máscara con el título, descripción y enlace. A continuación, proporciona los estilos CSS para posicionar la máscara sobre la imagen y animar el título, descripción y enlace para revelarse al pasar el mouse sobre la imagen.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    143 vistas3 páginas

    Efecto Hover CSS3

    Cargado por

    oscar pimentel
    Este documento describe cómo crear efectos hover para imágenes en CSS3 mediante el uso de propiedades como transform y transition. Explica una estructura HTML básica con un contenedor que envuelve la imagen y una máscara con el título, descripción y enlace. A continuación, proporciona los estilos CSS para posicionar la máscara sobre la imagen y animar el título, descripción y enlace para revelarse al pasar el mouse sobre la imagen.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 3

    CSS3: Efectos hover para imágenes

    por Daniel Ernesto Manchego Rivas | Mar 24, 2015 | CSS, Diseño, html | 5 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 <div class="contenedor-img">
    2 <img src="imgejemplo.jpg" alt="" />
    3 <div class="mascara">
    4 <h2>Ejemplo</h2>
    5 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendiss
    6 malesuada.</p>
    7 <a class="link" href="#">Leer mas</a>
    8 </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 /*Estilos Base*/
    2 .contenedor-img {
    3 width: 300px;
    4 height: 200px;
    5 float: left;
    6 overflow: hidden;
    7 position: relative;
    8 text-align: center;
    9 cursor: default;
    10 background: #fff;
    11 }
    12 .contenedor-img .mascara,.contenedor-img .contenido {
    13 width: 300px;
    14 height: 200px;
    15 position: absolute;
    16 overflow: hidden;
    17 top: 0;
    18 left: 0
    19 }
    20 .contenedor-img img {
    21 display: block;
    22 position: relative;
    23
    24 }
    25 .contenedor-img h2 {
    26 text-transform: uppercase;
    27 color: #fff;
    28 text-align: center;
    29 position: relative;
    30 font-size: 17px;
    31 padding: 10px;
    32 background: rgba(0, 0, 0, 0.9);
    33 margin: 20px 0 0 0
    34 }
    35 .contenedor-img p {
    36 font-size: 12px;
    37 position: relative;
    38 color: #fff;
    39 padding: 10px 20px 10px;
    40 text-align: center
    41 }
    42 .contenedor-img a.link {
    43 display: inline-block;
    44 text-decoration: none;
    45 padding: 7px 14px;
    46 background: #222;
    47 color: #fff;
    48 text-transform: uppercase;
    49 box-shadow: 0 0 1px #000
    50 }
    51 .contenedor-img a.link:hover {
    52 box-shadow: 0 0 5px #000
    53 }

    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.

    También podría gustarte