Crea un efecto zoom con CSS
Pasa el cursor por encima de mi logo 🤓
Código HTML para crear un efecto zoom
<div class="card"> <div class="titulo">FJMD</div> <div class="subtitulo">Te ayudo a materializar cualquier idea digital</div> <img class="imagen" src="https://fjmduran.com/favicon.png" alt="Logo FJMD" /> <p class="descripcion"> Actualmente desarrollo plataformas de comunicación entre grandes instalaciones industriales y las autoridades medioambientales, proyectos llave en mano de IoT y softwares expertos de control de procesos químicos en varios países como Brasil, Canadá, Chile, Corea del Sur, España, Italia, Japón, Polonia y Reino Unido. </p> </div>
👌
Código CSS para crear un efecto zoom
.card{ width:100%; max-width:500px; border: 2px solid lightgrey; border-radius:0.5rem; padding:2rem; overflow: hidden; //es importante especificar que todo lo que se salga de la card se oculte } .titulo{ margin:0; text-align:left; font-size:1.5rem; } .descripcion{ text-align:left; } .imagen{ transform: scale(var(--escala, 1)); transition: transform 0.25s; } .imagen:hover{ --escala: 1.2; cursor:pointer; }
Hasta luego 🖖