wordpress网站优化之美化文章页列表框-Eswlnk Blog
智能摘要 AI
近期浏览博客时，发现知更鸟主题文章页列表效果出色，特别是图片悬停放大及高亮显示功能。受此启发，作者将其应用到自己站点的主题中。通过CSS代码实现：图片悬停时放大至1.2倍，同时文章列表项悬停时添加蓝色虚线边框。具体样式包括圆角处理和过渡动画效果。此外，还提及了上期优化文章的链接供参考。

最近在浏览博客网站时，发现知更鸟主题的文章页列表的效果不错

鼠标移动到图片便会自动放大，并且突出显示鼠标所在的文章

我也照着样子，模仿了一下，搬到了本站主题上

效果展示

CSS代码

/** 网站圆角样式集合 **/
#slider img,.single-tag li a,#slider img,.cat-box, .cat-title,.fadeInUp,#sidebar h3,.cat-grid-title, .cat-square-title,.nbs-flexisel-container,img,a，.nav-menu, .nav-menu *,.type-cat a, .child-cat a,.link-all a
{border-radius: 8px
}
/** 文章列表蓝色虚框 **/
.list-grid .list-item:hover{
border: 1px dashed #39c;
}
/*图片缩放*/
            .media-content {  
                display: block;
                margin: 0 auto;
                width:400px;
                overflow: hidden;
            }
              
            .media-content{  
                width: 100%;  
                transform: scale(1);  
                transition: all 1s ease 0s;
            }  
            
            .media-content:hover{  
                transform: scale(1.2);
                transition: all 1s ease 0s;
            }

上期优化文章

https://blog.eswlnk.com/427.html