缩略图hover时放大和浮动

代码效果

这个代码是用来在网页中实现一些鼠标悬停（hover）效果的，当鼠标移动到文章缩略图区域时，缩略图放大。

当鼠标移动到文章区域时，文章向上移动位置，并在底部添加一点阴影。

代码展示

# 放到style.css文件中即可 #

# 全站thumb-link生效 - 缩略图 hover 放大效果 #

.thumb-link {
    transition: all .4s ease-out;
}

.thumb-link:hover {
    transform: scale(1.1);
}

代码解读：

.thumb-link：这是一个用于缩略图链接的类。transition: all .4s ease-out; 使用指定的过渡效果。

.thumb-link:hover：当鼠标悬停在带有 thumb-link 类的元素上时，元素会进行 transform: scale(1.1); 变换，使其放大到原始大小的 1.1 倍。

# 网格文章文章 hover 向上微动效果 #

.item-post-style-1>.item-in {
    transition: all .4s ease-out;
}

.item-post-style-1>.item-in:hover {
    transform: translateY(-3px);
    box-shadow: 0 2rem 1rem -1rem #ddd3fb4d;
    transition: all .4s ease-out;
}

代码解读：

transform: translateY(-3px);  使元素在垂直方向上向上移动 3 像素。

box-shadow: 0 2rem 1rem -1rem #ddd3fb4d;  添加一个阴影效果，使元素在悬停时看起来有浮动的感觉。

transition: all .4s ease-out;：指定了过渡效果，确保悬停和移开时效果有平滑的过渡。

.item-post-style-1指定给了网格文章使用此样式，其他文章类型不影响,删除item-post-style-1会使所有文章类型都受到此影响