mayo 18, 2024

Zoom de imagen al pasar el mouse Hover | HTML CSS

Vistas: 811Vistas: 812
Tiempo de lectura:1 Minuto, 4 Segundo

«Zoom de imagen al pasar el mouse» es una animación general en una imagen que se usa en casi todos los sitios web porque este efecto se ve atractivo y fluido.

En este efecto, cuando pasamos el cursor sobre la imagen, el tamaño de la imagen aumentará y se hará más grande. Aquí estamos usando html y css. La propiedad CSS «transform» se utiliza para crear este efecto.

Si desea obtener más información sobre los «varios efectos en la imagen», lea nuestros artículos.

Codigo HTML

<div class="imghover">   
  <div class="contenido">
    <img src="image.jpg" alt="image">
  </div>
</div>

Copiamos el codigo HTML para formar la estructura de nuestra imagen con una animación al pasar el mouse, para luego insertar los estilos (CSS) para completar la magia.

Codigo CSS

<style>
.imghover{
text-align: center;
} 
.imghover .contenido {
overflow: hidden;
box-shadow: 2px 2px 24px #000;
padding: 10px;
border-radius: 10px;
}
.imghover .contenido img{ 
background-size: cover;
transition: all .4s ease-in-out;
} 
.imghover .contenido img:hover {
-webkit-transform: rotate(5deg) scale(1.3);
-moz-transform: rotate(5deg) scale(1.3);
-ms-transform: rotate(5deg) scale(1.3);
-o-transform: rotate(5deg) scale(1.3);
}
</style>

Demostración en vivo

 

    image
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *