Elevación con Sombra
Categoría: Efectos Hover
Efecto de elevación con sombra al pasar el ratón
Vista Previa:
Elemento con Hover
Pasa el ratón por encima
📚 Explicación del Efecto:
Este efecto usa transform: translateY() para mover el elemento y box-shadow para crear una sombra más pronunciada en hover.
Código Exportable
CSS
HTML
.efecto-hover {
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
background: white;
padding: 20px;
border-radius: 10px;
}
.efecto-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}<div class="efecto-hover">
<h3>Elemento con Hover</h3>
<p>Pasa el ratón por encima</p>
</div>