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

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

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

效果展示

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