Efectos con hover y transition en CSS (parte 1)

- Andrés Cruz

Efectos con hover y transition en CSS (parte 1)

En las siguientes entradas daremos algunos experimentos empleando el selector hover y las Transiciones y/o Animaciones en CSS para tener algunos efectos curiosos que tal vez te sirvan para implementarla en tu web.

Para este primer experimentos además del selector hover haremos uso de otros selectores como before y after que en conjunto permiten crear el siguiente efecto:

Pase el cursor por encima

La idea es...

Veámoslo en parte; primero empleamos un único div cuyo hijo solo será una imagen; el siguiente HTML representa lo comentado anteriormente:

	<div class="cuerpo leon derecha">
		<img src="leon.jpg" />
	</div>

Más un poco de CSS para darle la forma deseada a nuestro div e imagen:

            .cuerpo {
                width: 200px;
                height: 200px;
		margin:30px auto 0 auto;
            }
            .cuerpo img{
		width:inherit;
		height:inherit;
		border-radius:50%;
		object-fit: cover;
            }

Obtenemos el siguiente resultado:

Capas del experimento

Analizando el CSS anterior…

  • Un tamaño fijo y proporcional alineados.
  • Especificamos el tamaño de las imágenes igual a la del padre empleando el valor inherit.
  • Además de aplicar un redondeo a las imágenes y emplear la propiedad object-fit para cambiar la relación de aspecto hablado en una entrega anterior.

Los selectores before y after

Con los selectores before y after es posible crear otros "contenedores" respectivamente:

Capas del experimento
Los selectores before y after son tan versátiles que inclusive pueden tomar distintas propiedades como los div.

El CSS renderizado a través del selector before se mostrará encima de la imagen dando como efecto un borde translúcido encima de la misma; mientras que el CSS renderizado del selector after solo se mostrará cuando el cursor se posicione encima del div.

CSS del selector before

Para el borde redondeado y difuminado especificado en el CSS del selector before se emplea:

            .cuerpo:before {
		display: block;
		border-radius: 50%;
		content: '';	
		box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5);
                	width: inherit;
                	height: inherit;
		position: absolute;
            }

Analizando el CSS anterior…

  • Empleamos la propiedad box-shadow para crear un borde interno; esta propiedad fue tratada en una entrega anterior.
  • De nuevo se especifica el tamaño del "contenedor" igual al del div empleando el valor inherit.
Con el valor inherit se heredan los valores del padre.

CSS del selector after

Ahora falta especificar el CSS para el selector after el cual se mostrará cuando se posicione el cursor encima del div a través de una transición:

            .cuerpo:after {
 		display: table-cell; 
		border-radius: 50%;
		box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5);
                	width: inherit;
                	height: inherit;
		position: absolute;
		background: rgba(0, 0, 0, 0.8);
		transition: all 1s;
		opacity:0;
		content:"";
		color:#FFF;
		text-align:center;
  		font-family: Arial;
	    	font-size: 12px;
   		font-weight: bold;
		line-height: 50px;
            }

Analizando el CSS anterior…

  • opacity establecido en cero para que no se vea el "contenedor".
  • Especificamos la transición con la propiedad transition.

Tenemos casi todo listo, falta definir el comportamiento (transición) que ocurrirá cuando posicionamos el cursor encima del div e inicie la Transiciones en CSS; para esto empleamos los siguiente selectores combinados con distintos ángulos:

	.derecha:after {
/*Mi CSS*/
	}

Por ejemplo; definimos las siguientes transformaciones especificando todos los lados y laterales:

	.derecha:after {
		transform:translate(300px,-200px);
	}
	.izquierda:after {
		transform:translate(-300px,-200px);
	}
	.arriba:after {
		transform:translate(0,-500px);
	}
	.abajo:after {
		transform:translate(0,300px);
	}
	.lateral1:after {
		transform:translate(-300px,-300px);
	}
	.lateral2:after {
		transform:translate(300px,-300px);
	}
	.lateral3:after {
		transform:translate(300px,300px);
	}
	.lateral4:after {
		transform:translate(-300px,300px);
	}
            .derecha:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .izquierda:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .arriba:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .abajo:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .lateral1:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .lateral2:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .lateral3:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .lateral4:hover:after {
		transform:translate(0px,-200px);
		opacity:1;
            }
            .leon:after {
		content:"León";
            }
            .chita:after {
		content:"Chita";
            }

Puedes ver el código completo y descargar los recursos en los siguientes enlaces:

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.