Crea un efecto zoom con CSS

Publicado el 26.02.2022 a las 12:09

Crea un efecto zoom con CSS

  1. El código HTML

  2. El código CSS

Crea un efecto zoom con CSS

Pasa el cursor por encima de mi logo 🤓

Logo FJMD

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 🖖