TODO HOVER: Efecto fade (desvanecerse)

jueves, 2 de junio de 2022

Efecto fade (desvanecerse)

Ejemplo

/* Fade */
.hvr-fade {
  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);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #2098D1;
  color: white;
}
  .reading{ background-color: #f9f9; color:#ffffd;background-repeat: no-repeat;background-position: 50%;padding: 45px;border-radius: 12px;font-size: 28px;text-align:justify;
background-size: contain;}
  
</STYLE>
<p  class="reading   hvr-fade">Ejemplo</p>