.box-wrap{ margin-top: 60px; margin-bottom: 120px; } .box-wrap ul li{ margin-bottom: 2.08%; margin-right: 2.08%; float: left; transition: 1s; background-repeat: no-repeat; background-size: 100% 100%; overflow: hidden; position: relative; width: 31.94% } .box-wrap ul li:nth-child(3n){ margin-right: 0; } .box-wrap ul li > p{ position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 80%; margin: 0 auto; color: #fff; } .box-wrap ul li:hover > p{ opacity: 0; } .box-wrap ul li:hover .hide{ top: 0; } .box-wrap ul li .hide{ box-sizing: border-box; padding: 16.3% 15.21% 10.8% 8.6%; position: absolute; top: 100%; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.3); } .box-wrap ul li .hide h2{ margin-bottom: 4.34%; line-height: 1.417; color: #fff; } .box-wrap ul li .hide p{ color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .box-wrap ul li .hide .button{ position: relative; margin-top: 8.6%; text-align: center; background: #fff; width: 46.57%; height: 44px; line-height: 44px; } .box-wrap ul li .hide .button a{ display: block; width: 100%; height: 100%; } .box-wrap ul li .hide .button img{ position: absolute; width: 8px; height: 12px; right: 10%; top: 50%; transform: translateY(-50%); } @media only screen and (max-width:1440px) { } @media only screen and (max-width:1366px) { } @media only screen and (max-width: 1180px){ .box-wrap ul li .hide { padding: 10.3% 15.21% 10.8% 8.6%; } } @media only screen and (max-width:1024px) { } @media only screen and (max-width:767px) { .box-wrap { margin-top: 20px; } .box-wrap ul li .hide { padding: 16.3% 15.21% 10.8% 8.6%; } .box-wrap ul li { margin-bottom: 2.08%; margin-right: 2.08%; float: left; transition: 1s; background-repeat: no-repeat; background-size: 100% 100%; overflow: hidden; position: relative; width: 100%; } }