效果图:

附件放到网站根目录
鼠标悬浮可以自动切换,背景图片跟链接可以自行更改
以下代码放到后台-模块管理-自定义
<style>
.puxin-widget-catGrid .bottomcat .big-item {
display: flex;
align-items: center;
justify-content: center;
background: #000;
position: relative;
overflow: hidden;
}
.puxin-widget-catGrid .bottomcat .big-item:hover {
display: block;
}
.puxin-widget-catGrid .bottomcat .big-item .item-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
}
.puxin-widget-catGrid .bottomcat .big-item:hover .item-bg {
display: none;
}
.puxin-widget-catGrid .bottomcat .big-item .item-warp {
position: relative;
color: #fff;
text-align: center;
}
.puxin-widget-catGrid .bottomcat .big-item:hover .item-warp {
padding: 30px;
text-align: left;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.datutext {
color: #fff;
font-size: 22px;
margin: 0;
flex: 1;
position: relative;
padding-bottom: 15px;
margin-bottom: 10px;
}
.desc p {
font-size: 13px;
}
.puxin-widget-catGrid .bottomcat .big-item:hover .item-warp .datutext:after {
background: #fff;
left: 0;
}
.puxin-widget-catGrid .bottomcat .big-item .item-warp .datutext:after {
content: '';
position: absolute;
bottom: 0;
left: 26%;
width: 2em;
height: 4px;
background: none;
}
.puxin-widget-catGrid .bottomcat .big-item i {
display: none;
position: absolute;
bottom: 0;
right: 0;
width: 48px;
height: 48px;
background-image: url(/img/toRight.png);
background-size: cover;
z-index: 10;
margin: 20px;
}
.puxin-widget-catGrid .bottomcat .big-item:hover i {
display: block;
}
.puxin-widget-catGrid .bottomcat {}
.puxin-widget-catGrid .bottomcat .small-item {
height: 92px;
display: block;
background: #000;
position: relative;
overflow: hidden;
}
.puxin-widget-catGrid .bottomcat .small-item .title {
display: block;
position: relative;
z-index: 10;
text-align: center;
line-height: 95px;
color: #fff;
font-size: 22px;
}
.puxin-widget-catGrid .bottomcat .small-item:hover .title {
display: none;
}
.puxin-widget-catGrid .bottomcat .small-item .item-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
}
.puxin-widget-catGrid .bottomcat .small-item:hover .item-bg {
display: none;
}
.puxin-widget-catGrid .bottomcat .small-item .item-warp {
align-items: center;
z-index: 10;
position: relative;
height: 100%;
transition: all .3s !important;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.puxin-widget-catGrid .bottomcat .small-item:hover .item-warp {
display: flex;
padding: 0 15px;
}
.puxin-widget-catGrid .bottomcat .small-item .item-warp .datutext:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 2em;
height: 4px;
background: #fff;
}
.puxin-widget-catGrid .bottomcat .small-item .item-warp i {
display: block;
width: 48px;
height: 48px;
background-image: url(/img/toRight.png);
background-size: cover;
}
.puxin-widget-catGrid {
width: calc(100% + 16px);
}
.puxin-widget-catGrid .topCat .item {
display: block;
overflow: hidden;
position: relative;
line-height: 13px;
}
.puxin-widget-catGrid .topCat .item p {
line-height: 20px;
}
.puxin-widget-catGrid .topCat .item .item-bg {
transition: all .3s;
background: #000;
height: 100%;
}
.puxin-widget-catGrid .topCat .item:hover .item-bg {
transform: translateY(-60%);
}
.puxin-widget-catGrid .topCat .item .item-bg img {
height: 100%;
opacity: .6;
}
.puxin-widget-catGrid .topCat .item:hover .item-bg {
transform: translateY(-60%);
}
.wide-screen .row {
margin-right: -10px;
margin-left: -10px;
}
.puxin-widget-catGrid .topCat .item .item-warp {
position: absolute;
top: 45%;
left: 0;
width: 100%;
text-align: center;
transition: all .3s;
}
.puxin-widget-catGrid .topCat .item .item-warp .datutext:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
height: 4px;
width: 50px;
top: 30px;
background: none;
transition: all .3s;
}
.puxin-widget-catGrid .topCat .item:hover .datutext:after {
background: #fff;
}
.puxin-widget-catGrid .topCat .item .item-warp p {
padding: 0 20px;
color: #fff;
line-height: 20px;
font-size: 13px;
letter-spacing: 1px;
}
.puxin-widget-catGrid .topCat .item .item-warp i {
opacity: 0;
display: block;
width: 56px;
height: 56px;
margin: 0 auto;
margin-top: 20px;
background: url(/img/toRight.png);
transition: all .3s;
}
.postlist-img-warp .item img,
.entry-media img {
margin: 0 auto;
overflow: hidden;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
object-fit: cover;
}
.postlist-img-warp .left-thumb {
width: 316px;
height: 528px;
overflow: hidden;
margin-right: 20px;
position: relative;
margin-bottom: 20px;
}
.puxin-widget-catGrid .topCat .item:hover i {
opacity: 1;
}
.btn-outline-dark:not(:disabled):not(.disabled).active,
.btn-outline-dark:not(:disabled):not(.disabled):active,
.show>.btn-outline-dark.dropdown-toggle,
.go-send-email-code,
.go-rest-password,
.archive-filter-2 .current a,
.archive-filter-2 a:hover,
.pagination .current,
.vipinfo-page,
.btn-light:hover,
.filters .dropdown-item.active,
.filters .dropdown-item:active,
.filters .dropdown-item:hover,
.puxin-widget-catGrid .topCat .item,
.puxin-widget-catGrid .bottomcat .small-item:hover,
.btn-light,
.puxin-widget-catGrid .bottomcat .big-item:hover {
background-image: -webkit-linear-gradient(0deg, #ff3355 0%, #ff3355 100%);
color: #fff;
}
#abcd1-circles.home-section-bottom .container .item {
width: calc(25% - 40px);
}
.change-theme {
display: flex;
margin: 0 10px;
align-items: center;
float: left;
margin-top: 6px;
}
.col-px-1 {
flex: 0 0 calc(25% - 16px);
width: calc(25% - 16px);
margin-bottom: 0px;
float: left;
margin-right: 16px;
}
.col-px-1a {
flex: 0 0 calc(25% - 16px);
width: calc(25% - 16px);
float: left;
position: relative;
margin-right: 16px;
}
.col-px-2 {
flex: 0 0 calc(25% - 16px);
width: calc(25% - 16px);
margin-bottom: 0px;
float: left;
margin-right: 16px;
}
.puxin-widget-catGrid .bottomcat .big-item,
.puxin-widget-catGrid .bottomcat .small-item {
margin-top: 16px;
}
.col-sm-6 {
width: calc(25% - 16px);
}
.puxin-widget-catGrid .bottomcat .big-item {
height: 200px;
}
</style>
<div id="home-row-fenlei" class=" home_row home_row_1 module-qukuai " style="background-color:;">
<div class="wrapper">
<div class="home-row-left content-area ">
<section class="puxin-widget-catGrid">
<div class="topCat row">
<div class="col-px-1a">
<a class="item b2-radius" href="https://west2.cn/flgma%e7%b4%a0%e6%9d%90" target="_blank">
<div class="item-bg"><img src="/img/1.jpg"></div>
<div class="item-warp">
<div class="datutext">gm素材 </div>
<p></p>
<i></i>
</div>
</a>
</div>
<div class="col-px-1a">
<a class="item b2-radius" href="https://west2.cn/sketch%e7%b4%a0%e6%9d%90" target="_blank">
<div class="item-bg"><img src="/img/2.jpg"></div>
<div class="item-warp">
<div class="datutext">ch素材 </div>
<p></p>
<i></i>
</div>
</a>
</div>
<div class="col-px-1a">
<a class="item b2-radius" href="https://west2.cn/ui-kit" target="_blank">
<div class="item-bg"><img src="/img/3.jpg"></div>
<div class="item-warp">
<div class="datutext">UI</div>
<p></p>
<i></i>
</div>
</a>
</div>
<div class="col-px-1a">
<a class="item b2-radius" href="https://west2.cn/xd%e7%b4%a0%e6%9d%90" target="_blank">
<div class="item-bg"><img src="/img/4.jpg"></div>
<div class="item-warp">
<div class="datutext">XD素材 </div>
<p></p>
<i></i>
</div>
</a>
</div>
</div>
<div class="bottomcat">
<div class="row" style="margin-top: 0px;">
<div class="col-px-2">
<a class="small-item b2-radius" href="https://west2.cn/mfff" target="_blank">
<div class="title">免费素材</div>
<div class="item-bg"><img src="/img/5.jpg"></div>
<div class="item-warp">
<div class="datutext">免费素材</div>
<i></i>
</div>
</a>
<a class="small-item b2-radius" href="https://west2.cn/%e5%9b%be%e6%a0%87" target="_blank">
<div class="title">图标</div>
<div class="item-bg"><img src="/img/6.jpg"></div>
<div class="item-warp">
<div class="datutext">图标</div>
<i></i>
</div>
</a>
</div>
<div class="col-px-1">
<a class="big-item b2-radius" href="https://west2.cn/%e5%ad%97%e4%bd%93" target="_blank">
<div class="item-bg"><img src="/img/7.jpg"></div>
<div class="item-warp">
<div class="datutext">字体</div>
<div class="desc"></div>
</div>
<i></i>
</a>
</div>
<div class="col-px-1">
<a class="big-item b2-radius" href="https://west2.cn/%e6%8f%92%e7%94%bb" target="_blank">
<div class="item-bg"><img src="/img/8.jpg"></div>
<div class="item-warp">
<div class="datutext">插画</div>
<div class="desc"></div>
</div>
<i></i>
</a>
</div>
<div class="col-px-2">
<a class="small-item b2-radius" href="https://west2.cn/%e6%a0%b7%e6%9c%ba%e4%b8%8b%e8%bd%bd" target="_blank">
<div class="title">样机下载</div>
<div class="item-bg"><img src="/img/9.jpg"></div>
<div class="item-warp">
<div class="datutext">样机下载</div>
<i></i>
</div>
</a>
<a class="small-item b2-radius" href="https://west2.cn/%e8%ae%be%e8%ae%a1%e5%b7%a5%e5%85%b7" target="_blank">
<div class="title">设计工具</div>
<div class="item-bg"><img src="/img/10.jpg"></div>
<div class="item-warp">
<div class="datutext">设计工具</div>
<i></i>
</div>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
感谢分享
好
支持一个!
非常不错
感谢分享
停留是刹那,转身即天涯
泰裤辣