TODO HOVER: Efecto Grow Shadow

viernes, 3 de junio de 2022

Efecto Grow Shadow - crecer sombra

Ejemplo



<p class="hvr-grow-shadow" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Grow Shadow - crecer sombra */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>