.blind:after{ display:none;} #album{ overflow: hidden;margin-bottom: 50px; } .bookStyle{position:relative;overflow:visible;width: calc(100/3);/* margin: 0 100px 50px; */width: 32%;float: left;} .bookStyle:nth-child(even){/* margin-top: 100px; */} .bookStyle .photo{/* position:absolute; */left:0;top:0;width:100%;height:100%;z-index: 1;} .bookStyle .photo a img{width:100%;height:100%;object-fit:cover} .bookStyle .info{z-index: 2;/* position: absolute; */order: 2;} .bookStyle .info h3{font-size: 20px;text-align: right;writing-mode:initial;margin:0;background: #e97912;position: relative;} .bookStyle .info h3 a{color:#fff;display:inline-block;width:auto;height:auto;padding:4px 10px;font-weight:400;line-height:120%;position:relative;z-index: 2;} .bookStyle .info h4{font-size: 20px;line-height:120%;text-align:right;background: #212121;color:#fff;display:inline-block;padding:6px 12px;font-weight:400;margin-top:5px;writing-mode:initial;} .bookStyle .photo,.bookStyle .info h3 a,.bookStyle .info h4,.bookStyle .info h3{transition:all linear .3s} .bookStyle .photo{ background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .main-article.moreW .workframe{ width: 1280px; margin: 0px auto; overflow: hidden; } .main-article #describe{overflow: hidden;border: 1px solid #dbdbdb;padding: 50px;} .main-article #describe h3{ font-size: 22px; padding: 0 15px 15px; border-bottom: 1px solid #dbdbdb; margin-bottom: 25px; } .main-article.moreW article{margin:10px; overflow: hidden;} #community{ padding: 0px 10px; overflow: hidden; } .grid:after{content:'';display:block;clear:both;} .grid-sizer, .grid-item{width: 20%;} .grid-item{float:left;} .grid-item img{display:block;width:100%;height: 270px;} .grid-item a{display:block;position:relative;margin: 10px;} .grid-item a p{position:absolute;bottom:0;left:0;width:calc(100% - 40px);padding:10px 20px;color:#fff;background: #0000006b;} @media screen and (min-width: 1025px) { .bookStyle:hover .photo{/* width:110%; */height:110%;left:-5%;top:-5%;} .bookStyle .info h3:after{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;background: #212121;z-index: 1;transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);} .bookStyle:hover .info h3:after{transform:scale(1,1);transform-origin:left center 0;} } @media screen and (max-width: 1440px) { .grid-sizer, .grid-item{width:25%;} } @media screen and (max-width: 1280px){ .main-article.moreW .workframe { width: 90%; } } @media screen and (max-width: 1024px) { .bookStyle{ width: calc(50% - 101px); margin: 0 50px; } .bookStyle .info{ left: -50px; } .bookStyle .info h3{ font-size: 30px; } .bookStyle .info h4{ font-size: 15px; } .main-article #describe { overflow: hidden; border: 1px solid #dbdbdb; padding: 20px; } } @media screen and (max-width: 768px) { .bookStyle:nth-child(even){ margin-top: 50px; } .bookStyle .info h3{ font-size: 22px; } .bookStyle .info h4{ font-size: 12px; } .grid-sizer, .grid-item{width:50%;} .grid-item a{margin: 0;} } @media screen and (max-width: 640px) { .bookStyle{ width: calc(70% - 101px); margin: 20px 50px; float: none; } .bookStyle:nth-child(even){ margin: 0 0 0 50px; margin-left: calc(30% + 50px); } .bookStyle .info{ width: 137px;} .main-article.moreW .workframe{width: 90%;} } @media screen and (max-width: 480px) { .bookStyle{ width: calc(80% - 41px); margin: 20px 20px; } .bookStyle:nth-child(even){ margin: 0 0 0 20px; margin-left: calc(20% + 20px); } }