Overlaping an image from one section to another

[SlimSr2003]

Hi,

I have two questions. I am always seeing pages with images that overlap from one row to another.  Such as in the example below:

I had thought to do this using a negative margin using CSS but no matter what i find online for this it doesnot seem to work. Although it seems like it should be simple. So I am hoping the experts here can help. 

Second question has to do with vertically centering a rich Text module in a row. I was able to accomplish this with these pieces of CSS: 

.rowVertcenter .row-fluid .span3 {
display: table-cell;
float: none !important;
vertical-align: middle;
}
.textVertcenter > div {
display: flex !important;
align-items: center;
justify-content: center;
}
.textVertcenter > div > span {
width: 90%;
height: 100%;
}
.modulemargin {
margin-left:30px;
}

but now it seems to have stopped working. So again, I am asking the experts here for help as I am at a loss. 

Thanks In Advance

Scott

[piersg · Accepted solution]

I would use flexbox and do this:

.rowVertcenter > .row-fluid-wrapper > .row-fluid {
    display: flex;
}
.textVertcenter>div {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.textVertcenter>div>span {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 768px) {
  .rowVertcenter > .row-fluid-wrapper > .row-fluid {
    flex-direction: column;
  }
  /* If you want to re-order the text so it's above the images on mobile add this */
  .rowVertcenter > .row-fluid-wrapper > .row-fluid > .span6:not(.textVertcenter) {
    order: 2;
  }
}

[SlimSr2003]

Hi piersg,

Thanks for the insights in question one. I will give it a try and see what I can come up with. 

For the second question here is a link to the landing page that uses the Template: http://info.yeshealth.com/lp-time-sign-up

I got the text to center when it is on a larg screen but when i look at it on a mobile scree the break points for the images and text are not right. So I think that is what i truly need help on. 

Anything insights you can provid will be greatly apprecaiated.

[piersg]

For overlapping images, using positioning would be your best bet. Either relative to itself e.g. position: relative; top: -100px; or absolute and relative to its parent e.g. give parent position: relative; and then the image position: absolute; top: -100px;

For your second question, can you please provide a link so we can give specific help?