论坛 › 马黑黑教程专版 › 仿搜狗图片鼠标滑过的响应效果

马黑黑 发表于 2023-2-13 23:27

仿搜狗图片鼠标滑过的响应效果

<style>
.picbox {
        padding: 0;
        width: 200px;
        height: 200px;
        border: 1px solid #555;
        overflow: hidden;
        position: relative;
        display: inline-block;
}
.picbox > img {
        width: 200px;
        height: 200px;
        cursor: pointer;
        transition: .6s;
        position: absolute;
}
.picbox > img:hover {
        transform: scale(1.05);
}
</style>

<p>效果演示：<br><br></p>

<div class="picbox">
        <img alt="" src="https://638183.freep.cn/638183/t23/1/ub1.webp" />
</div>
<div class="picbox">
        <img alt="" src="https://638183.freep.cn/638183/t23/1/ub2.webp" />
</div>

<p><br>代码放在二楼</p>

马黑黑 发表于 2023-2-13 23:28

代码
<style>
.picbox {
        padding: 0;
        width: 200px;
        height: 200px;
        border: 1px solid #555;
        overflow: hidden;
        position: relative;
        display: inline-block;
}
.picbox > img {
        width: 200px;
        height: 200px;
        cursor: pointer;
        transition: .6s;
        position: absolute;
}
.picbox > img:hover {
        transform: scale(1.05);
}
</style>

<div class="picbox">
        <img alt="" src="https://638183.freep.cn/638183/t23/1/ub1.webp" />
</div>
<div class="picbox">
        <img alt="" src="https://638183.freep.cn/638183/t23/1/ub2.webp" />
</div>

马黑黑 发表于 2023-2-13 23:29

主要模仿的是效果，实现方式可能不一样，没看它的代码

庶民 发表于 2023-2-14 04:39

路过也要点赞。

红影 发表于 2023-2-14 08:53

鼠标划过时，图片变大，但整体占位大小没变，这个很神奇{:4_187:}

红影 发表于 2023-2-14 08:56

是用display: inline-block;实现的吧，然后超出的部分被剪掉了。学习了{:4_187:}

马黑黑 发表于 2023-2-14 18:19

红影 发表于 2023-2-14 08:56
是用display: inline-block;实现的吧，然后超出的部分被剪掉了。学习了

凡是 block 属性的都行，都可以用做边框框住图片。这里之所以用 inline-block ，是想让 div 排排坐，因为 div 默认的 display 是 block，文档流中，两个 div 放在一起默认是上下排列。

马黑黑 发表于 2023-2-14 18:20

庶民 发表于 2023-2-14 04:39
路过也要点赞。

谢谢

马黑黑 发表于 2023-2-14 18:20

红影 发表于 2023-2-14 08:53
鼠标划过时，图片变大，但整体占位大小没变，这个很神奇

模拟的就是这个效果

红影 发表于 2023-2-15 20:50

马黑黑 发表于 2023-2-14 18:19
凡是 block 属性的都行，都可以用做边框框住图片。这里之所以用 inline-block ，是想让 div 排排坐，因为 ...

原来用display: inline-block;可以让图图顺序排列，这个好，学习了{:4_187:}

红影 发表于 2023-2-15 20:51

马黑黑 发表于 2023-2-14 18:20
模拟的就是这个效果

嗯嗯，这个效果特别好{:4_187:}

马黑黑 发表于 2023-2-15 22:07

红影 发表于 2023-2-15 20:51
嗯嗯，这个效果特别好

不错的

马黑黑 发表于 2023-2-15 22:08

红影 发表于 2023-2-15 20:50
原来用display: inline-block;可以让图图顺序排列，这个好，学习了

具体说是横向排列

红影 发表于 2023-2-16 10:39

马黑黑 发表于 2023-2-15 22:07
不错的

又学了一招。

红影 发表于 2023-2-16 10:40

马黑黑 发表于 2023-2-15 22:08
具体说是横向排列

以前放图片，即使很小也自动跑下面了，现在知道这个命令就能自动横排了，真好。

马黑黑 发表于 2023-2-16 19:26

红影 发表于 2023-2-16 10:39
又学了一招。

方法还有别的

马黑黑 发表于 2023-2-16 19:32

红影 发表于 2023-2-16 10:40
以前放图片，即使很小也自动跑下面了，现在知道这个命令就能自动横排了，真好。

img标签默认也是 inline 属性，图片宽度加起来不超过一行的话，理论上不会换行。像这样：

<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />

只要图片的宽度尺寸加起来不超过一行的总长度，它们会并排在一起。如果换行，则需要使用 CSS 重新定义它的 display 属性： display: inline-block;

红影 发表于 2023-2-16 19:46

马黑黑 发表于 2023-2-16 19:26
方法还有别的

这个方法挺简洁好用的。

红影 发表于 2023-2-16 19:47

马黑黑 发表于 2023-2-16 19:32
img标签默认也是 inline 属性，图片宽度加起来不超过一行的话，理论上不会换行。像这样：




做在帖子里时通常是放在不同的地方，倒是不需要这样自动排列了。

马黑黑 发表于 2023-2-16 20:45

红影 发表于 2023-2-16 19:46
这个方法挺简洁好用的。

还可以的

查看完整版本: 仿搜狗图片鼠标滑过的响应效果