Main menu

Originales efectos hover con CSS3

Desde hace algún tiempo es tendencia en desarrollo y diseño web el uso de efectos sorprendentes en el hover de ciertos elementos. A continuación explicaremos cómo usar alguno de estos efectos con solo CSS3, aprovechando sobretodo el uso de transiciones.

En otros artículos ya te hemos explicado cómo aprovechar tu hoja de estilos CSS para crear efectos y animaciones de forma sencilla, como en los tutoriales para maquetar listas con CSS o aplicar filtros especiales en imágenes.

Efecto 1

Usaremos una imagen que al pasar el cursor sobre ella, se deslice oblicuamente hasta desaparecer para mostrar un texto escondido debajo. Este es el resultado:

  • Suscríbete a la Newsletter

    No te pierdas nuestros últimos artículos, se el primero en estar al día acerca de nuestros posts.

La estructura HTML que necesitamos es:

<ul class="demo-1 effect">
    <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

El código CSS que necesita esta estructura es:

.demo-1 {
    position:relative;
    width:300px; 
   height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-1 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-1 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-230px;
    right:-330px;
    padding-bottom:200px;
    padding-left:300px
}

Efecto 2

En este efecto deslizaremos la imagen principal ligeramente hacia abajo, dejando espacio suficiente para mostrar el texto que hay debajo. Ejemplo:

  • Expertos en desarrollo web

    Confía en nuestra experiencia.

La estructura HTML necesaria es la siguiente:

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is a cool title!</h2>
       <p class="zero">Lorem ipsum dolor sit amet.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

Mientras que el código CSS necesario es el que sigue:

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

Efecto 3

Con este efecto, conseguimos crear la impresión de una tarjeta que se voltea mostrando las dos caras:

  • Contacta con nosotros

    Cualquier duda que tengas o comentario que quieras hacernos llegar, no dudes en contactar con nosotros.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

El código HTML necesario varía un poco respecto de los anteriores ejemplos, ahora haremos uso de algunas etiquetas HTML5:

<ul class="demo-3">
    <li>
        <figure>
            <img src="images/image1.jpg" alt=""/>
            <figcaption>
                <h2>This is a cool title!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
        </figure>
    </li>
</ul>

El CSS necesario:

.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

A tener en cuenta

Si vas a usar alguno de estos efectos, ten en cuenta que algunos valores posicionales en el código CSS van a depender del tamaño de la imagen que queramos usar. También puedes invertir la dirección de las transiciones, puedes personalizar los efectos o crear los tuyos propios.

Compartir en redes sociales

Si este artículo te ha sido de ayuda o te parece interesante, ayúdanos a difundirlo.

Compartir en Facebook Compartir en Twitter Compartir en Google+ Compartir en Linkedin
  • Que interesante artículo, estan muy bonitos los efectos, sin duda usaré mas de alguno de ellos.

    • blogendeos

      Gracias por tu comentario Gerson. Encantados de que te sean útiles.

  • D4b0x

    Los Felicito por el excelente blog que tienen, es increíble todo lo que uno puede aprender acá! Muchas Gracias por existir y compartir con el resto del mundo esta información. Espero más artículos como este. Gracias !!!

    • blogendeos

      Encantados de que te haya sido útil D4b0x, comentarios como el tuyo nos animan a seguir adelante. Y ya sabes… si te ha gustado, compártelo en tus redes sociales 🙂

Al usar este sitio acepta el uso de cookies para análisis y contenido personalizado. Leer más

ACEPTAR
Aviso de cookies