.no-gap .et_pb_column_1_2{margin-right:0;width:540px}.no-gap .et_pb_column_1_3{margin-right:0;width:360px}.no-gap .et_pb_column_1_4{margin-right:0;width:270px}.et-fixed-header #logo{opacity:0}.ds-hover-1{display:inline-block;position:relative;margin:0px;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:0.5}.ds-hover-1::after{content:attr(ds-title);position:absolute;height:12%;color:#fff;z-index:1;top:0;width:90%;background:rgba(0,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:rgba(255,102,0,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%)}If you keep the image aspect ratio I have used then this should work just fine,but if your images have a different aspect ratio then you may need to play around with the percentages in the .ds-hover-1::before and .ds-hover-1::after sections of the CSS.
Here is the CSS for all four effects
* Change text color of WPForms form */
#wpforms-2058 .wpforms-field-label,#wpforms-2058 .wpforms-field-description,#wpforms-2058 .wpforms-field input,#wpforms-2058 .wpforms-field textarea{color:ffffff}