div over the image using CSS - html

Question

I am creating a layout but I am getting some issue with the position.
I tried position: absolute but I am getting some issue.
I user display: flex and flex:1 for display the equal height of the div.
Would you help me out in this?
I tried below code to set.
.set_white_box{
position: absolute;
width: 50%;
top: 50%;
transform: translateY(-50%);
}
I added a simple structure in the snippet.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>

Answer 1

you can use transform to move the image around and z-index to change order
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
/* translate to move it around */
transform: translate(-50px, 50px);
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
/* z-index to bring text to front */
position:relative;
z-index: 2;
}
/* jsut using nth-child to target the 2nd version */
.equal_padding:nth-child(even) .service_img_col {
transform: translate(50px, -50px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>

Answer 2

Please try following code. also you can add multiple box no change design and looking good with left & right side align
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.equal_padding {
padding: 100px 0;
}
.equal_padding:nth-child(2n + 1) .service_img_col {
position: relative;
left: -50px;
top: 30px;
}
.equal_padding:nth-child(2n + 2) .service_img_col {
position: relative;
right: -50px;
top: -30px;
}
.equal_padding:nth-child(2n + 1) {
padding-left: 50px;
}
.equal_padding:nth-child(2n + 2) {
padding-right: 50px;
}
.service_content1 {
display: flex;
}
.service_img_col {
width: 50%;
flex: 1;
border: 4px solid #000;
}
.service_img_col img {
width: 100%;
}
.service_box {
flex: 1;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
padding: 40px;
position: relative;
z-index: 9;
border: 4px solid #000;
}
<section>
<div class="container">
<div class="row">
<div class="equal_padding clearfix service_content1">
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
</div>
<div class="equal_padding clearfix service_content1">
<div class="service_img_col"><img src="https://images.pexels.com/photos/1097768/pexels-photo-1097768.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div>
<div class="service_box set_white_box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</section>