Crea un efecto zoom con CSS

Publicado el 26.02.2022 a las 12:09

Crea un efecto zoom con CSS

⚫ El HTML

⚫ El CSS

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 🤓

Logo FJMD

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

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.2.2