子比美化丨二次元鼠标悬停特效五格模块

使用步骤

以下代码放入 WordPress后台 — 外观 –小工具– 自定义HTML（位置自定义）

以下代码放到 主题-自定义CSS样式（将代码中的图片地址换成自己的图片）

.course-project-panel-course[data-v-d1c115ee] {
background-color: #f5f5f7;
padding: 24px 0;
border-radius: 10px
}
.course-project-panel-course ul[data-v-d1c115ee] {
display: flex;
justify-content: space-around
}
.course-project-panel-course ul li[data-v-d1c115ee] {
width: 100%;
cursor: pointer;
border-right: 1px solid #eaeaea;
position: relative
}
.course-project-panel-course ul li .top[data-v-d1c115ee] {
text-align: center;
opacity: 1;
transition-duration: 1.5s
}
.course-project-panel-course ul li .top .title[data-v-d1c115ee] {
font-size: 22px;
font-weight: 700;
padding: 24px 0 20px
}
.course-project-panel-course ul li .top .describe[data-v-d1c115ee] {
font-size: 14px;
color: #484848
}
.course-project-panel-course ul li .top .line[data-v-d1c115ee] {
width: 24px;
height: 4px;
background-color: #31a86c;
margin: 10px auto 40px;
border-radius: 50px
}
.course-project-panel-course ul li .top .ivu-btn[data-v-d1c115ee] {
font-size: 13px;
width: 134px;
height: 40px;
color: #fff
}
.course-project-panel-course ul li .top .vip[data-v-d1c115ee] {
color: #31a86c
}
.course-project-panel-course ul li .top .vip-line[data-v-d1c115ee] {
background-color: #31a86c
}
.course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee] {
background-color: #9bd5b8;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #31a86c
}
.course-project-panel-course ul li .top .routine[data-v-d1c115ee] {
color: #ff902e
}
.course-project-panel-course ul li .top .routine-line[data-v-d1c115ee] {
background-color: #ff902e
}
.course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee] {
background-color: #fac6a1;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #ff902e
}
.course-project-panel-course ul li .top .ten[data-v-d1c115ee] {
color: #31a89b
}
.course-project-panel-course ul li .top .ten-line[data-v-d1c115ee] {
background-color: #31a89b
}
.course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee] {
background-color: #7fc7c0;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #31a89b
}
.course-project-panel-course ul li .top .double[data-v-d1c115ee] {
color: #ffc343
}
.course-project-panel-course ul li .top .double-line[data-v-d1c115ee] {
background-color: #ffc343
}
.course-project-panel-course ul li .top .double-btn[data-v-d1c115ee] {
background-color: #fbd78b;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .double-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #ffc343
}
.course-project-panel-course ul li .top .nike[data-v-d1c115ee] {
color: #439bff
}
.course-project-panel-course ul li .top .nike-line[data-v-d1c115ee] {
background-color: #439bff
}
.course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee] {
background-color: #8abffc;
border: 0 solid #0054f0 !important
}
.course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee]:hover {
border: none;
background-color: #439bff
}
.course-project-panel-course ul li .vip-bottom[data-v-d1c115ee] {
background: url(图片地址) 0 0 no-repeat
}
.course-project-panel-course ul li .routine-bottom[data-v-d1c115ee] {
background: url(图片地址) 0 0 no-repeat
}
.course-project-panel-course ul li .ten-bottom[data-v-d1c115ee] {
background: url(图片地址) 0 0 no-repeat
}
.course-project-panel-course ul li .double-bottom[data-v-d1c115ee] {
background: url(图片地址) 0 0 no-repeat
}
.course-project-panel-course ul li .nike-bottom[data-v-d1c115ee] {
background: url(图片地址) 0 0 no-repeat
}
.course-project-panel-course ul li .bottom[data-v-d1c115ee] {
width: 256px;
height: 268px;
color: #1b1b1b;
border-radius: 10px;
padding: 46px 28px 0;
position: absolute;
left: 0;
top: -28px;
opacity: 0;
transform: scale(1);
transition-duration: .5s
}
.course-project-panel-course ul li .bottom .title[data-v-d1c115ee] {
font-size: 23px;
padding-bottom: 24px
}
.course-project-panel-course ul li .bottom .describe[data-v-d1c115ee] {
font-size: 14px
}
.course-project-panel-course ul li .bottom .line[data-v-d1c115ee] {
width: 24px;
height: 4px;
background-color: #fff;
margin: 15px 0 30px;
border-radius: 50px
}
.course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee] {
width: 80%;
border: none;
background-color: hsla(0, 0%, 100%, .5);
font-size: 13px;
height: 40px;
color: #0c301e;
text-shadow: 0 3px 20px #3c6751;
text-align: center
}
.course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee]:hover {
background-color: #fff
}
.course-project-panel-course ul li[data-v-d1c115ee]:last-child {
border-right: none
}
.course-project-panel-course ul li:hover .top[data-v-d1c115ee] {
opacity: 0;
transition-duration: .5s
}
.course-project-panel-course ul li:hover .bottom[data-v-d1c115ee] {
transform: scale(1.05);
opacity: 1;
transition-duration: 1s
}