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

马黑黑

效果演示：

代码放在二楼

马黑黑

代码

1. <style>
   
2. .picbox {
   
3.         padding: 0;
   
4.         width: 200px;
   
5.         height: 200px;
   
6.         border: 1px solid #555;
   
7.         overflow: hidden;
   
8.         position: relative;
   
9.         display: inline-block;
   
10. }
    
11. .picbox > img {
    
12.         width: 200px;
    
13.         height: 200px;
    
14.         cursor: pointer;
    
15.         transition: .6s;
    
16.         position: absolute;
    
17. }
    
18. .picbox > img:hover {
    
19.         transform: scale(1.05);
    
20. }
    
21. </style>
    
22. 
    
23. <div class="picbox">
    
24.         <img alt="" src="https://638183.freep.cn/638183/t23/1/ub1.webp" />
    
25. </div>
    
26. <div class="picbox">
    
27.         <img alt="" src="https://638183.freep.cn/638183/t23/1/ub2.webp" />
    
28. </div>

复制代码

马黑黑

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

庶民

路过也要点赞。

红影

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

红影

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

马黑黑

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

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

马黑黑

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

谢谢

马黑黑

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

模拟的就是这个效果

红影

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

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

红影

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

嗯嗯，这个效果特别好

马黑黑

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

不错的

马黑黑

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

具体说是横向排列

红影

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

又学了一招。

红影

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

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

马黑黑

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

方法还有别的

马黑黑

红影 发表于 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:26
方法还有别的

这个方法挺简洁好用的。

红影

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

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

马黑黑

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

还可以的