How to use css to enlarge the image when the mouse slides over the thumbnail-CSS Tutorial-php.cn

How to use css to enlarge the image when the mouse slides over the thumbnail

墨辰丷

Release： 2018-05-11 17:32:02

Original

2412 people have browsed it

This article mainly introduces how to use css to enlarge the image when the mouse slides over the thumbnail. It is very convenient and practical in daily shopping websites. Interested friends can refer to it.

The code is as follows:

<!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>

Copy after login

Related recommendations:

How to use HTML CSS to make mouseover Can display the secondary menu bar

CSS3 practical development: teach you step by step how to develop mouse-over picture animation special effects (second round)_html/css_WEB-ITnose

css3 mouse over the image scatter effect_html/css_WEB-ITnose

The above is the detailed content of How to use css to enlarge the image when the mouse slides over the thumbnail. For more information, please follow other related articles on the PHP Chinese website!