文章缩略图鼠标滑过图片动画！兼容7B2主题和子比主题

这篇文章将详细介绍如何在7B2和子比主题中实现文章缩略图的鼠标滑过动画效果。这种效果不仅能为你的文章展示增添视觉吸引力，还可以提升用户体验。通过简单的设置和代码，你的网站将拥有更加动感的缩略图展示效果，无论是7B2还是子比主题，兼容性都非常好，让你的网站更具吸引力！
都是添加到主题的style.css文件里面，也可以在后台添加到自定义css里~

B2修改方法

1. /*B2文章划过动画图片开始 – 90LHD.COM-惦记博客*/
2. .post–module–thumb:after {
3. content: “”;
4. position: absolute;
5. top: 50%;
6. left: 50%;
7. width: 50px;
8. height: 50px;
9. margin: –25px 0 0 –25px;
10. background: url(https://www.90lhd.com/favicon.ico);
11. background–repeat: no–repeat;
12. background–size: 100% 100%;
13. z–index: 3;
14. –webkit–transform: scale(2);
15. transform: scale(2);
16. transition: opacity .75s, –webkit–transform .75s;
17. transition: transform .75s, opacity .75s;
18. transition: transform .75s, opacity .75s, –webkit–transform .75s;
19. opacity: 0;
20. pointer–events: none;
21. }
22. .post–module–thumb:before {
23. content: “”;
24. position: absolute;
25. top: 0;
26. left: 0;
27. right: 0;
28. bottom: 0;
29. background: rgba(0, 0, 0, 0);
30. transition: background .35s;
31. border–radius: 8px;
32. z–index: 2;
33. max–width: 765px;
34. margin: 0 auto;
35. pointer–events: none;
36. }
37. .post–module–thumb:hover:before {
38. background: rgba(0,0,0,.5)
39. }
40. .post–module–thumb:hover:after {
41. –webkit–transform: scale(1);
42. transform: scale(1);
43. opacity: 1
44. }
45. /*B2文章划过动画图片结束*/

子比修改方法

1. /*文章主图hover美化开始*/
2. .item–thumbnail:after {
3. content: ”;
4. position: absolute;
5. top: 50%;
6. left: 50%;
7. width: 50px;
8. height: 50px;
9. margin: –25px 0 0 –25px;
10. background: url(https://www.90lhd.com/favicon.ico);
11. background–repeat: no–repeat;
12. background–size: 100% 100%;
13. z–index: 3;
14. –webkit–transform: scale(2);
15. transform: scale(2);
16. transition: opacity .75s, –webkit–transform .75s;
17. transition: transform .75s, opacity .75s;
18. transition: transform .75s, opacity .75s, –webkit–transform .75s;
19. opacity: 0;
20. pointer–events: none;
21. }
22. .item–thumbnail:before {
23. content: ”;
24. position: absolute;
25. top: 0;
26. left: 0;
27. right: 0;
28. bottom: 0;
29. background: rgba(0, 0, 0, 0);
30. transition: background .35s;
31. border–radius: 8px;
32. z–index: 2;
33. max–width: 765px;
34. margin: 0 auto;
35. pointer–events: none;
36. }
37. .item–thumbnail:hover:before {
38. background: rgba(0,0,0,.5)
39. }
40. .item–thumbnail:hover:after {
41. –webkit–transform: scale(1);
42. transform: scale(1);
43. opacity: 1
44. }
45. /*文章主图hover美化结束*/