Overlay hover effect

Overlay hover effect / 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

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

Este tipo de efectos son puramente decorativos, pero si se trata de un link, sirve para enfatizarlos en la web.

En este caso, se aplica sobre una imagen, el texto del enlace tiene un background, que ocupa el 50%, 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: 61px;
	}

CSS del texto y contenedor del href con class ".overlay": Link con background, al 50%.

	.overlay {
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  right: 0;
	  background-color: rgba(144,202,249,.7);
	  overflow: hidden;
	  width: 50%;
	  height: 100%;
	  transition: .5s ease;
	}

CSS hover: ".overlay" al 100% y transición de color.

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

	.overlay:hover{
	  background-color: rgba(74,103,127,.8);
	}

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

Este efecto está aplicado en varias secciones de la web politel.es, uno de ellos se localiza en "Soluciones para hoteles".

Politel es una web corporativa sobre la cual escribí en el anterior post.

Mariano J.

Hola, me gusta mucho este ejemplo, ¿donde puedo ver mas ejemplos similares que tengan el código disponible? Muchas gracias.

Tomás Tomás / 30-06-2017

Puedes ver más en la propia web de codepen https://codepen.io , existen otras muchas, pero junto a esa, esta otra es muy interesante: https://tympanus.net/codrops Espero que te sean de ayuda. Un saludo.

Mariano J. / 30-06-2017

¡Muchas gracias!

Tomás Tomás / 30-06-2017

Escribe un comentario

Tu email no se hará visible