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

26.02.2022 a las 12:09

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

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

Saludos 😉

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2