最近在浏览博客网站时,发现知更鸟主题的文章页列表的效果不错
鼠标移动到图片便会自动放大,并且突出显示鼠标所在的文章
我也照着样子,模仿了一下,搬到了本站主题上
效果展示
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;
}
📮评论