El efecto de zoom de imagen se utiliza para aplicar zoom sobre una imagen al pasar el mouse o al hacer clic. Este tipo de efecto se usa principalmente en sitios de cartera. Es útil en situaciones en las que queremos mostrar los detalles del usuario en la imagen. Hay dos formas posibles de crear un efecto de desplazamiento del mouse.
- Usando JavaScript
- Usando CSS
En este artículo, veremos cómo hacer zoom en una imagen al pasar el mouse usando CSS. Este artículo contiene dos secciones de código. La primera sección contiene el código HTML y la segunda sección contiene el código CSS.
Código HTML: en esta sección, usaremos HTML para crear una estructura básica de Zoom de imagen en el efecto de desplazamiento.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title> How to Zoom an Image on Mouse Hover using CSS? </title> </head> <body> <div class="geeks"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" /> </div> </body> </html>
Código CSS: en esta sección, usaremos algunas propiedades CSS para ampliar una imagen al pasar el mouse. Para crear un efecto de zoom, usaremos las propiedades de transición y transformación.
CSS
<style>
.geeks {
width: 300px;
height: 300px;
overflow: hidden;
margin: 0 auto;
}
.geeks img {
width: 100%;
transition: 0.5s all ease-in-out;
}
.geeks:hover img {
transform: scale(1.5);
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un efecto de zoom de imagen al pasar el mouse usando HTML y CSS.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to Zoom an Image on
Mouse Hover using CSS?
</title>
<style>
.geeks {
width: 300px;
height: 300px;
overflow: hidden;
margin: 0 auto;
}
.geeks img {
width: 100%;
transition: 0.5s all ease-in-out;
}
.geeks:hover img {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png"
alt="Geeks Image" />
</div>
</body>
</html>
Producción:
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA