recherche

Maison  >  Article  >  interface Web  >  Comment utiliser CSS pour agrandir l'image lorsque la souris glisse sur la vignette

Comment utiliser CSS pour agrandir l'image lorsque la souris glisse sur la vignette

墨辰丷
墨辰丷original
2018-05-11 17:32:022354parcourir

Cet article explique principalement comment utiliser CSS pour agrandir l'image lorsque la souris glisse sur la vignette. C'est très pratique dans les sites Web d'achats quotidiens. Les amis intéressés peuvent s'y référer.

Le code est le suivant : 

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.php.cn php中文网 鼠标滑过缩略图时放大图片</title> 
<style type="text/css"> 
<!-- 
* {margin:0;padding:0;} 
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;} 
img {border:0} 
p {font-size:14px;} 
#imgmove li {float:left; width:50px; height:40px; display:block; overflow:visible;*overflow:hidden; margin:0px 5px; border:3px #333 solid;position:relative;*position:static;} 
#imgmove img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 40px 0px);z-index: 0;*position:static;} 
#imgmove img:hover {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; clip:rect(0px 137px 137px 0px);} 
--> 
</style> 
</head> 
<body> 
<p>本例旨在展示鼠标滑到缩略图上时，放大图片。</p> 

 

 

 

 

 
<!--[if IE 6]><a href="#"><![endif]--> 
<ul id="imgmove"> 
  <li><img src="http://img4.pcpop.com/WallImages/0x0/0/190/000190571.jpg" /></li> 
</ul> 
<!--[if IE 6]></a><![endif]--> 
</body> 
</html>

Recommandations associées :

Comment utiliser HTML+ CSS pour créer une souris Le défilement affichera la barre de menu secondaire

Développement pratique CSS3 : vous apprendra étape par étape comment développer des effets d'animation pour le survol des images avec la souris (deuxième tour)_html /css_WEB-ITnose

css3 souris sur l'effet de diffusion d'image_html/css_WEB-ITnose


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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：embellissement de l'interface de connexion CSSArticle suivant：embellissement de l'interface de connexion CSS

Articles Liés

Voir plus