Block Extended Square

How to Achieve

Add Divi Blog Extras Module to a Page and Select Block Extended Layout

Go to Divi Builder Page Setting

Paste the code given below in the Custom CSS area

<code><!-- [et_pb_line_break_holder] -->.et_pb_post_extra.el_dbe_block_extended.image-background .post-media:before{<!-- [et_pb_line_break_holder] --> background: rgba(255,255,255,0.5);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.et_pb_post_extra.el_dbe_block_extended.image-background:hover .post-media:before{<!-- [et_pb_line_break_holder] --> background: rgba(255,255,255,0.2);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.et_pb_column_4_4 .et_pb_post_extra.el_dbe_block_extended.image-background .post-content {<!-- [et_pb_line_break_holder] --> padding: 70px 30px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.et_pb_post_extra.el_dbe_block_extended {<!-- [et_pb_line_break_holder] --> padding-bottom: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.et_pb_column_4_4 .et_pb_post_extra.el_dbe_block_extended {<!-- [et_pb_line_break_holder] --> display: flex;<!-- [et_pb_line_break_holder] --> align-items: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></code>