图片的自动放大

CSS图片放大效果

最新推荐文章于 2022-03-22 17:06:37 发布

前端Baymax

最新推荐文章于 2022-03-22 17:06:37 发布

阅读量682

点赞数

CC 4.0 BY-SA版权

分类专栏：趣味前端文章标签： html css 图片

本文链接：https://blog.youkuaiyun.com/XXJ19950917/article/details/73136144

趣味前端专栏收录该内容

61 篇文章

订阅专栏

本文介绍了一种使用CSS实现的图片相册动态放大效果。通过设置特定的CSS样式，当鼠标悬停在图片上时，图片会自动放大。文章提供了完整的HTML和CSS代码，并解释了为何选择使用<ul><li>来组织图片。

图片的自动放大效果

大概是今天早上10点钟的样子，我就接收到一个消息，需要进行图片的动态效果，给出的效果图如下：
就我个人而言我还真没有写过这样的效果，图片的相册效果的实现需要进行思考才好实现它的效果。

css实现：
html

<ul class="box">
  <li><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
  <li><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li>
</ul>

这里解释一下为什么要使用<ul><li></li>...</ul>这类的标签实现图片的效果。
原因：
- <ul></ul>定义无序列表。W3C给出了很准确的字面意思解释，但是什么是无序列表了？它的好处是什么了？这两个疑惑出现在我的脑海中，我试着进行解答一下。
- 我试着用我自己理解的方式来解答一下这个问题，仅仅是进行思考感觉已经不足够了。看一下测试：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jackdan9&&ul</title>
    </head>
    <body>
        <ul>
            <li>jackdan90</li>
            <li>jackdan91</li>
            <li>jackdan92</li>
            <li>jackdan93</li>
        <ul>
    </body>
</html>

效果图如下:
css

.box li {
    float:left;
    width:105px;
    height:90px;
    overflow:hidden; 
    text-align:center;
}
.box li p { 
    display:block;
    width:95px;
    overflow:hidden; 
    height:25px; 
    line-height:25px; 
    margin:0 5px;
}
.box li span a {
    width:95px; 
    height:53px; 
    overflow:hidden;
    text-align:center; 
    display:block; 
    border:1px #000 solid;
}
.box li span a img {
    width:95px; 
    height:53px; 
    border:none;
}
.box li span a:hover {
    border:5px #000 solid;
    position:absolute;
    width:150px;
    height:88px;
    overflow:hidden; 
    margin: -15px 0 0 -15px;
}
.box li span a:hover img { 
    width:150px;
    height:88px;
    order:none;
}