Overlay hover effect II

Overlay hover effect II / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Overlay hover effect II

Efecto Overlay hover con transición desarrollado únicamente con CSS.

En este caso, se aplica sobre una imagen, el texto del enlace tiene un background oculto, al hacer hover, este ocupa el 100% con transición.

See the Pen Overlay hover effect by Mariano J. (@didac) on CodePen.

Tres elementos son claves en el CSS

CSS de la class ".containerImg": Contenedor de la imágenes.

    .containerImg {
       position: relative;
       width: 100%;
       margin-top: 60px;
     }

CSS del texto y contenedor del href con class ".overlay".

    .overlay {
      position: absolute;
      bottom: 0;
      right: 0;
      left: -50%;
      overflow: hidden;
      width: 50%;
      height: 100%;
      display: none;
      background-color: rgba(27,81,127,.7);
    }

.overlay:hover.

    .containerImg:hover .overlay {
      width: 100%;
      left: 0;
      display: block;
    }

Puedes ver y descargar este ejemplo en mi perfil de Codepen.

Puedes ver un ejemplo similar en este blog Overlay hover effect.

Mariano J.

Escribe un comentario

Tu email no se hará visible