main .project {
margin-top: 0.45rem;
}
main .project .row{
margin-left: -10px;
margin-right: -10px;
}
main .project .row .col-xl-6{
padding-left: 10px;
padding-right: 10px;
}
main .project .cart{
position: relative;
margin-bottom: 40px;
cursor: pointer;
}
main .project .cart .img{
width: 100%;
}
main .project .cart .img img{
width: 100%;
}
main .project .cart .mask{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
transition: all 0.5s;
background-color: rgba(50, 47, 46,0.7);
pointer-events: none;
}
main .project .cart .mask h3{
font-size: 0.22rem;
font-family: 'AlibabaSans';
position: relative;
z-index: 9;
text-align: center;
}
main .project .cart .mask .line{
width: 80px;
height: 6px;
background-color: #fff;
margin: 8px 0;
margin-bottom: 16px;
position: relative;
z-index: 9;
}
main .project .cart .mask p{
position: relative;
z-index: 9;
text-align: center;
margin-bottom: 16px;
position: absolute;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
display: none;
}
main .project .cart .mask span{
opacity: 0;
position: relative;
z-index: 9;
width: 28px;
height: 28px;
background-color: #322F2E;
position: absolute;
display: none;
} main .project .cart:hover .mask{
opacity: 0;
}
main .project .cart:hover .mask::after{
height: 100%;
}
main .project .cart:hover .mask span{
opacity: 1;
position: relative;
transition: all 0.5s;
}
main .project .cart:hover .mask p{
opacity: 1;
position: relative;
transition: all 0.5s;
}
main .project .content>a{
margin: 0 auto;
margin-top: 0.4rem;
}
main .project .page{
justify-content: center;
}
@media (max-width:1279px) {
main .project .cart .mask::after{
height: 100%;
}
main .project .cart .mask p{
opacity: 1;
position: relative;
}
main .project .cart .mask span{
opacity: 1;
position: relative;
}
main .project .cart .mask h3{
font-size: 0.3rem;
}
}