Animación de cuadro de sombra flotante
CSS
Publicado el 18 de Junio del 2021 por Katas (47 códigos)
4.376 visualizaciones desde el 18 de Junio del 2021
Amplia y desamplia un texto al pasar el ratón por encima, haciendo un efecto de zoom.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Efecto de zoom en una imagen y texto con CSS3</title>
<style type="text/css">
.hover-shadow-box-animation {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
margin: 10px;
transition-duration: 0.3s;
transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
transform: scale(1.2);
}
</style>
</head>
<body>
<p class="hover-shadow-box-animation">Pasa el ratón por encima</p>
</body>
</html>
Comentarios sobre la versión: 1 (0)
No hay comentarios