Home > Article > Web Front-end > How to use css to enlarge the image when the mouse slides over the thumbnail
How to use css to enlarge the image when the mouse slides over the thumbnail
- 墨辰丷Original
- 2018-05-11 17:32:022364browse
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>Related recommendations:
How to use HTML CSS to make mouseover Can display the secondary menu bar
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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css login interface beautificationNext article：css login interface beautification