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

Home

Web Front-end

CSS Tutorial

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

May 11, 2018 pm 05:32 PM

css

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:

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 
&lt;title&gt;www.php.cn php中文网 鼠标滑过缩略图时放大图片&lt;/title&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
&lt;!-- 
* {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);} 
--&gt; 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;p&gt;本例旨在展示鼠标滑到缩略图上时，放大图片。&lt;/p&gt; 
 
  
 
  
 
  
 
  
 
  
&lt;!--[if IE 6]&gt;&lt;a href=&quot;#&quot;&gt;&lt;![endif]--&gt; 
&lt;ul id=&quot;imgmove&quot;&gt; 
  &lt;li&gt;&lt;img src=&quot;http://img4.pcpop.com/WallImages/0x0/0/190/000190571.jpg&quot; /&gt;&lt;/li&gt; 
&lt;/ul&gt; 
&lt;!--[if IE 6]&gt;&lt;/a&gt;&lt;![endif]--&gt; 
&lt;/body&gt; 
&lt;/html&gt;

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!

Statement of this Website

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