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

前端基础开发

于 2020-02-26 20:55:22 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： html html5 css

本文链接：https://blog.youkuaiyun.com/html886/article/details/104524743

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复制代码

代码如下:

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