纯CSS实现图片列表悬停放大效果的方法

使用CSS实现图片列表悬停放大的技巧

最新推荐文章于 2024-09-23 13:41:34 发布

原创

最新推荐文章于 2024-09-23 13:41:34 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css

该文章介绍了一种纯CSS方法来实现在鼠标悬停时图片列表项放大显示的效果。通过CSS样式设置，创建了一个包含阴影效果和详细信息展示的交互式图片列表。当鼠标悬停在图片上时，图片会扩大，背景变为淡绿色，并显示额外的介绍信息。

复制代码

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>片悬停放大</title>
<style>
*{margin:0;padding:0;}
body{margin-top:80px;font-size:12px;font-family:"微软雅黑",arial,sans-serif;color:#9C9C91;background:#fff;}
a {color:#333;text-decoration: none;}
a:hover {color:#f00;}
.wrap {width:720px;background:#f2f2f2;margin:0 auto;}
ul.works {list-style:none;margin:0;padding:0;}
ul.works li {float:left;display: inline;margin:0 20px 20px 0;width:158px;height:150px;}
ul.works li a {text-decoration: none;display:block;width:158px;height:150px;background:#fff;}
ul.works li a img {width:150px;height:140px;border:0;}
ul.works li a .imgthumb {position:relative;background:#EFEFEF;}<