Maison > Article > interface Web > Comment agrandir l'image en plaçant la souris en css3 ? (avec code)
Comment agrandir l'image en plaçant la souris en css3 ? (avec code)
- 不言original
- 2018-10-10 14:10:4713646parcourir
Dans l'étude de CSS3, nous ferons souvent quelques petits effets d'animation, ce qui est très intéressant, donc l'article d'aujourd'hui vous présentera un effet de CSS3 pour réaliser une amplification d'image. Les amis intéressés peuvent y jeter un œil.
Nous savons tous que CSS3 ajoute un attribut de transformation qui s'applique à la transformation 2D ou 3D des éléments. L'attribut transform nous permet de faire pivoter, mettre à l'échelle, déplacer ou incliner des éléments. Par conséquent, l'attribut transform est nécessaire pour réaliser l'agrandissement de l'image en CSS3. Examinons l'effet de l'utilisation de l'attribut transform en CSS3 pour réaliser l'agrandissement de l'image.
Le premier type : css3 réalise l'effet que lorsque l'on met la souris sur l'image, l'image est agrandie et la partie excédentaire n'est pas cachée :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
width: 300px;
height: 300px;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.2);
-ms-transform: scale(1.2);
}
</style>
</head>
<body>
<div class="enlarge">
<img src="images/tu.jpg" alt="图片"/>
</div>
</body>
</html>La comparaison avant et après du CSS3 réalisant l'effet de placer la souris sur l'image pour agrandir l'image est la suivante :
L'effet de l'agrandissement de l'image sur l'image et en masquant la partie au-delà : 
L'effet avant et après de l'utilisation de CSS3 pour agrandir l'image en plaçant la souris sur l'image est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
width: 300px;
height: 300px;
overflow: hidden;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.3);
-ms-transform: scale(1.3);
}
</style>
</head>
<body>
<div class="enlarge">
<img src="images/tu.jpg" alt="图片"/>
</div>
</body>
</html>
Explication : Pour les deux situations d'amplification d'image CSS3 ci-dessus, la pseudo-classe :hover est utilisée, qui représente l'état lorsque la souris survole, de sorte que lorsque nous plaçons la souris sur l'image. Lorsque l'on clique sur la souris, l'image sera agrandie. Lorsque la souris est retirée, l'image reviendra à sa taille d'origine. 
Ce qui précède représente l'intégralité du contenu de cet article. Pour une utilisation plus détaillée de l'attribut transform en CSS3, vous pouvez vous référer au
pour une compréhension plus approfondie.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!