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:

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:

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.

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: