En este artículo, aprendemos cómo hacer zoom al pasar el mouse usando CSS. Se llama pseudo-selector y se usa para seleccionar todos los elementos cuando el usuario mueve el mouse sobre los elementos. Cuando el usuario se desplaza sobre el elemento, se llama a la función de escala para aumentar las dimensiones del elemento. Se puede utilizar en todos los elementos. Se debe declarar un elemento en el documento para ver el funcionamiento de este selector en todos los elementos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to zoom an element
on Hover using CSS ?
</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.sudo {
padding: 50px;
background-color: red;
transition: transform .2s;
width: 160px;
height: 160px;
margin: 0 auto;
border-radius: 29px;
}
.sudo:hover {
-ms-transform: scale(4.6);
/* IE 9 */
-webkit-transform: scale(1.5);
/* Safari 3-8 */
transform: scale(1.5);
}
</style>
</head>
<body>
<center>
<h1>
GeeksForGeek
</h1>
<h2>
How TO – Zoom on Hover
in inline CSS
</h2>
<div class="sudo">
Hover on Me
</div>
</center>
</body>
</html>
Producción:
- Antes de pasar el cursor sobre Red-Box:
- Después de pasar el cursor sobre Red-Box:
Navegadores compatibles: los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA