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 🖖



