效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.servicea1_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 60px;
border-radius: 20px;
overflow: hidden;
}
.servicea1_ul {
position: relative;
display: flex;
justify-content: space-between;
transition: all 0.5s ease;
overflow: hidden;
width: 11%;
/* width: 256px; */
/* margin-right: 12px; */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
flex-grow: 1;
}
.servicea1_ul .img1 {
/* width: 268px; */
width: 100%;
height: 468px;
object-fit: cover;
}
.servicea1_li {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
background: #fff;
padding: 50px 35px;
width: 50%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
position: absolute;
top: 0;
left: 50%;
}
.regardb_list {
position: absolute;
top: 0;
left: 0;
}
.servicea1_li a {
margin-top: 50px;
}
.servicea1_li p {
width: 198px;
}
.servicea1_on .servicea1_li {
visibility: visible;
opacity: 1;
transition: all 0.5s ease;
}
.servicea1_on {
width: 565px;
transition: all 0.5s ease;
}
.servicea1_on .servicea1_icon {
opacity: 0;
}
.servicea1_icon2 {
opacity: 0;
}
.servicea1_on .servicea1_icon2 {
opacity: 1;
}
.servicea1_on:before {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
}
.servicea1_ul li::before {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
}
.servicea1_on {
position: relative;
}
.servicea1_on::before {
background: linear-gradient(180deg, rgba(15, 19, 152, 0), rgba(15, 19, 152, 0.1), rgba(15, 19, 152, 1));
}
.servicea1_ul li::before {
background: linear-gradient(180deg, rgba(15, 19, 152, 0), rgba(15, 19, 152, 0.8), rgba(15, 19, 152, 1));
}
.servicea1_on li::before {
background: none;
}
.servicea1_icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 20px;
writing-mode: vertical-lr;
/* width: 100%; */
/* writing-mode: vertical-rl; */
/* 從右向左垂直排列 */
/* /* 從左向右垂直排列 */
}
.servicea1_icon2 {
position: absolute;
top: 15%;
left: 10%;
width: 400px;
color: #fff;
}
.servicea1_icon p {
color: #fff;
text-align: center;
font-size: 32px;
font-weight: bold;
letter-spacing: 7px;
}
.servicea1_icon2 .service_icon1 {
height: 46px;
}
.servicea1_p1 {
font-size: 24px;
font-weight: bold;
display: inline-block;
border-bottom: 3px solid #ffcb05;
}
.servicea1_ul1 {
margin-top: 30px;
}
</style>
<div class="servicea1_list">
<a href="javascript:;" class="servicea1_ul servicea1_on">
<li>
<img class="img1" src="static/demo/index/sokution1.jpg" alt="">
<div class="servicea1_icon">
<p>平屋頂</p>
</div>
<div class="servicea1_icon2">
<p class="servicea1_p1">平屋頂</p>
</div>
</li>
</a>
<a href="javascript:;" class="servicea1_ul ">
<li>
<img class="img1" src="static/demo/index/sokution2.jpg" alt="">
<div class="servicea1_icon">
<p>斜屋頂</p>
</div>
<div class="servicea1_icon2">
<p class="servicea1_p1">斜屋頂</p>
</div>
</li>
</a>
<a href="javascript:;" class="servicea1_ul">
<li>
<img class="img1" src="static/demo/index/sokution3.jpg" alt="">
<div class="servicea1_icon">
<p>庭院</p>
</div>
<div class="servicea1_icon2">
<p class="servicea1_p1">庭院</p>
</div>
</li>
</a>
<a href="javascript:;" class="servicea1_ul">
<li>
<img class="img1" src="static/demo/index/sokution4.jpg" alt="">
<div class="servicea1_icon">
<p>陽光棚</p>
</div>
<div class="servicea1_icon2">
<p class="servicea1_p1">陽光棚</p>
</div>
</li>
</a>
<a href="javascript:;" class="servicea1_ul">
<li>
<img class="img1" src="static/demo/index/sokution5.jpg" alt="">
<div class="servicea1_icon">
<p>工商業</p>
</div>
<div class="servicea1_icon2">
<p class="servicea1_p1">工商業</p>
</div>
</li>
</a>
<a href="javascript:;" class="servicea1_ul">
<li>
<img class="img1" src="static/demo/index/sokution6.jpg" alt="">
<div class="servicea1_icon">
<p>整村匯流</p>
</div>
<div class="servicea1_icon2">
<p class="servicea1_p1">整村匯流</p>
</div>
</li>
</a>
</div>
<script src="static/js/jquery-3.3.1.min.js"></script>
<script>
$('.servicea1_ul').mousemove(function () {
$(this).addClass('servicea1_on').siblings().removeClass('servicea1_on')
})
$('.servicea1_ul').click(function () {
$(this).addClass('servicea1_on').siblings().removeClass('servicea1_on')
})
</script>
</body>
</html>