群主风格-hover变大效果

群主风格-hover变大效果

卡片 hover 放大效果。

配置

（1）引入在线代码

编辑docs\.vitepress\theme\index.ts文件

import "vitepress-theme-teek/theme-chalk/tk-home-card-hover.css"; // 首页卡片悬停效果

（2）添加css代码用以控制卡片高度等

编辑docs\.vitepress\theme\style\var.scss文件：(在最后添加如下代码)

// 开始******************************************************************************************************************
// 2025年10月15日 更新
// 控制首页卡片高度等代码
// 定义变量
$white: #ffffff;
$circle-height: 310px;
$icons-margin-top: 10px;

// 圆形背景
.is-circle-bg {
  height: $circle-height; // 首页卡片栏博主信息高度
}

.tk-my__icons {
  margin-top: $icons-margin-top; //首页卡片栏博主信息社交图标位置
  color: $white; //首页卡片栏作者信息社交图标颜色
}

// 首页卡片栏博主信息
.tk-my__blogger {
  .name,
  .slogan {
    color: $white; // 博主名称和标语颜色
    display: flex; // 水平居中
    justify-content: center; // 水平居中
  }
}

.tk-my__avatar {
  margin-top: 220px;
  margin-bottom: 7px;
}
// .is-circle-bg {
//   height: 645px;
// }




.tk-post-item-card__cover-img .cover-img {
  cursor: pointer;
  height: 190px;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .4s linear;
  width: 100%;
}

// 结束******************************************************************************************************************

（3）验证。

结束。