.ds-hover-1{display:inline-block;position:relative;margin:0;overflow:hidden;background:#000}.ds-hover-1 img{display:block;max-width:100%;-webkit-transition:opacity 0.3s ease-in-out;-moz-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out}.ds-hover-1:hover img{opacity:.5}.ds-hover-1::after{content:attr(ds-title);position:absolute;height:12%;color:#fff;z-index:1;top:0;width:90%;background:rgb(0 0 0 / .5);font-weight:300;font-size:40px;text-transform:uppercase;padding:5%;-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:-webkit-transform 0.3s ease-in-out;-moz-transition:-moz-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out}.ds-hover-1::before{content:attr(ds-desc);position:absolute;height:100%;color:#fff;z-index:1;top:27%;width:initial;background:rgb(255 102 0 / .5);font-size:16px;padding:2% 5% 5% 5%;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 0.3s ease-in-out;-moz-transition:-moz-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out}.ds-hover-1:hover::after,.ds-hover-1:hover::before{-webkit-transform:translateY(0%);-moz-transform:translateY(0%);transform:translateY(0%)}.ds-hover-2{display:inline-block;position:relative;overflow:hidden;background:rgb(0 0 0 / .2);-webkit-transition:background 0.3s ease-in-out;-moz-transition:background 0.3s ease-in-out;transition:background 0.3s ease-in-out}.ds-hover-2:hover{background:#fff0}.ds-hover-2 img{display:block;max-width:100%;-webkit-transition:-webkit-transform 0.3s ease-in-out;-moz-transition:-moz-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out}.ds-hover-2:hover img{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);transform:translateX(100%)}.ds-hover-2::before,.ds-hover-2::after{position:absolute;width:100%;z-index:-1;-webkit-transform:translateX(-30%);-moz-transform:translateX(-30%);transform:translateX(-30%);-webkit-transition:-webkit-transform 0.3s ease-in-out;-moz-transition:-moz-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out}.ds-hover-2::before{content:attr(ds-title);height:30%;background-color:#000;color:#fff;font-size:40px;text-transform:uppercase;font-weight:300;padding:7% 5%}.ds-hover-2::after{content:attr(ds-desc);top:30%;height:70%;width:initial;background-color:#f60;color:#fff;font-size:16px;padding:5%}.ds-hover-2:hover::before,.ds-hover-2:hover::after{-webkit-transform:translateX(0%);-moz-transform:translateX(0%);transform:translateX(0%)}.ds-hover-3{display:inline-block;position:relative}.ds-hover-3 img{display:block;max-width:100%}.ds-hover-3::before,.ds-hover-3::after{opacity:0;position:absolute;width:90%;color:#fff;padding:5%;-webkit-transition:opacity 0.3s;-moz-transition:opacity 0.3s;transition:opacity 0.3s}.ds-hover-3::before{content:attr(ds-title);top:0;height:10%;background:rgb(0 0 0 / .5);font-size:40px;text-transform:uppercase;font-weight:300}.ds-hover-3::after{content:attr(ds-desc);top:25%;height:60%;width:initial;background:rgb(255 102 0 / .5);font-size:16px;text-align:right}.ds-hover-3:hover::before,.ds-hover-3:hover::after{opacity:1}.ds-hover-4{display:inline-block;position:relative;overflow:hidden;background:rgb(0 0 0 / .2);-webkit-transition:background 0.3s ease-in-out;-moz-transition:background 0.3s ease-in-out;transition:background 0.3s ease-in-out}.ds-hover-4:hover{background:#fff0}.ds-hover-4 img{display:block;max-width:100%;-webkit-transition:-webkit-transform 0.3s ease-in-out;-moz-transition:-moz-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out}.ds-hover-4:hover img{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%)}.ds-hover-4::before,.ds-hover-4::after{position:absolute;width:100%;z-index:-1;-webkit-transform:translateX(70%);-moz-transform:translateX(70%);transform:translateX(70%);-webkit-transition:-webkit-transform 0.3s ease-in-out;-moz-transition:-moz-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out}.ds-hover-4::before{content:attr(ds-title);height:30%;background-color:#000;color:#fff;font-size:40px;text-transform:uppercase;font-weight:300;padding:7% 5%}.ds-hover-4::after{content:attr(ds-desc);top:30%;height:70%;width:initial;background-color:#f60;color:#fff;font-size:16px;text-align:right;padding:5%}.ds-hover-4:hover::before,.ds-hover-4:hover::after{-webkit-transform:translateX(0%);-moz-transform:translateX(0%);transform:translateX(0%)}