Crea un efecto zoom con CSS

Crea un efecto zoom al pasar el puntero del ratón sobre una imagen de una card sólo con CSS

Pasa el cursor por encima de mi logo 🤓

FJMD

Te ayudo a materializar cualquier idea digital

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.

Al lío

Primero el HTML

<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>

👌

El CSS

.card{
  width:100%;
  max-width:500px;
  border: 2px solid lightgrey;
  border-radius:0.5rem;
  padding:2rem;    
}
.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 🖖

¿Te gusta mi contenido? Apóyame