很久没有更新子比的美化教程了，最近也看到很多美化的教程现在也来浅浅的水一下，今天分享的就是如标题教大家如何自己动手制作一张属于自己的独一无二的：鼠标悬停到文章特色图片效果图片教程 如下图

 

 

首先你要知道这东西是如何实现的

1.通过修改 css 样式让图片上层添加一层虚化的蒙版

2.子比主题设置—>自定义代码—>自定义 CSS 样式：

这两个网站可以在线图片背景透明

https://www.jsongj.com/img/transparent

https://mass-images.pro/zh/batch/tpl/transparent-bg

https://www.miaoyasuo.com/removebg   （推荐）

CSS 代码：

/*文章特色图片鼠标悬停效果开始*/
.item-thumbnail:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0);transition: background .35s;border-radius: 8px;z-index: 2;max-width: 765px;margin: 0 auto;pointer-events:none;}
.item-thumbnail:after {content: '';position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px;background:url(https://tc.pengqi.club/i/2024/07/15/6694cc5d996ae.png);background-repeat: no-repeat;background-size: 100% 100%;z-index: 3;-webkit-transform: scale(2);transform: scale(2);transition: opacity .35s,-webkit-transform .35s;transition: transform .35s,opacity .35s;transition: transform .35s,opacity .35s,-webkit-transform .35s;opacity: 0;pointer-events:none;}
.item-thumbnail:hover:before{background:rgba(0,0,0,.5)}
.item-thumbnail:hover:after{-webkit-transform:scale(1);transform:scale(1);opacity:1}
/*文章特色图片鼠标悬停效果结束*/