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

释放双眼,带上耳机,听听看~!


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

B2修改方法

	/*B2文章划过动画图片开始 - 90LHD.COM-惦记博客*/
 .post-module-thumb:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background: url(https://www.90lhd.com/favicon.ico);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    -webkit-transform: scale(2);
    transform: scale(2);
    transition: opacity .75s, -webkit-transform .75s;
    transition: transform .75s, opacity .75s;
    transition: transform .75s, opacity .75s, -webkit-transform .75s;
    opacity: 0;
    pointer-events: none;
}
.post-module-thumb: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;
}
 .post-module-thumb:hover:before {
                background: rgba(0,0,0,.5)
            }
        .post-module-thumb:hover:after {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1
            }
             /*B2文章划过动画图片结束*/

子比修改方法

/*文章主图hover美化开始*/
 .item-thumbnail:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background: url(https://www.90lhd.com/favicon.ico);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    -webkit-transform: scale(2);
    transform: scale(2);
    transition: opacity .75s, -webkit-transform .75s;
    transition: transform .75s, opacity .75s;
    transition: transform .75s, opacity .75s, -webkit-transform .75s;
    opacity: 0;
    pointer-events: none;
}
.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:hover:before {
                background: rgba(0,0,0,.5)
            }
        .item-thumbnail:hover:after {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1
            }
/*文章主图hover美化结束*/

给TA打赏
共{{data.count}}人
人已打赏

相关文章

WP代码网页建站

【7B2主题美化】给导航页面添加 入住说明模块

2024-8-14 16:43:29

教程网页建站问题解决

B2商城用户购买商品管理员收不到邮件提示解决方法

2024-9-2 15:18:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索