Responsive squared images with overlapping one in the middle

Question

I'm trying to create a specific layout in which:

Two images have to be one to the side of the other, filling all the width
Images height must adapt to create a squared image
In the middle of both images, an icon or text will be placed, as linking the images
The external container doesn't have a fixed height nor width

This is a representation of what I'm looking for:

Side to side images with one overlapping in the center

Side to side images with one overlapping in the center

This is what I've managed to do, but it has the following problems:

Depending on the size of the images, the squares take a different size
The middle icon doesn't go to the middle...

.main_container_1 {
  position: absolute;
  width: 100%;
  height: 600px;
  background-color:lime;
  margin: 10px;
  padding: 10px;
}

.row {
  width: 100%;
  background-color: yellow;
  display:flex
}

.image_cell {
    width:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.image_cell img {
     flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

.text-cell {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center; 
  background:white;
}

.inner {
  width: 50px;
  height: 50px;
  background-color:red;
}

<div class="main_container_1">
  <div class="row">
    <div class="image_cell">
      <img src="http://placehold.it/450x200">
    </div>
    <div class="image_cell">
      <img src="http://placehold.it/200x200">
    </div>
     <div class="text-cell">
       <div class="inner">
         text
       </div>
    </div>
</div>

Amr Noman · Accepted Answer · 2018-05-10T14:47:50.787

You basically need to make your .row's height to be half its width (that would give you space for two squares). To do that you need to use the padding trick.

.row {
  width: 100%;
  padding-top: 50%;
  background-color: yellow;
  position: relative;
}

and then you'll need to position your images absolutely since you're faking their parent's height with padding.

.image_cell {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.image_cell:nth-child(1) {
  left: 0;
}

.image_cell:nth-child(2) {
  right: 0;
}

and finally you can position your .text-cell in the center using transform like this (you must make sure to put position: relative to the parent container you want to position it relative to, which is .row in this case):

.text-cell {
  position: absolute;
  background: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Here's the final result:

.main_container_1 {
  position: absolute;
  width: 100%;
  height: 600px;
  background-color: lime;
  margin: 10px;
  padding: 10px;
}

.row {
  width: 100%;
  padding-top: 50%;
  background-color: yellow;
  position: relative;
}

.image_cell {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.image_cell:nth-child(1) {
  left: 0;
}

.image_cell:nth-child(2) {
  right: 0;
}

.image_cell img {
  width: 100%;
  height: 100%
}

.text-cell {
  position: absolute;
  background: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.inner {
  width: 50px;
  height: 50px;
  background-color: red;
}

<div class="main_container_1">
  <div class="row">
    <div class="image_cell">
      <img src="http://placehold.it/450x200">
    </div>
    <div class="image_cell">
      <img src="http://placehold.it/200x200">
    </div>
    <div class="text-cell">
      <div class="inner">
        text
      </div>
    </div>
  </div>

One more thing: you probably want to look into using background images instead to maintain aspect ratio.

score 0 · Answer 2 · answered May 10 '18 at 15:05

In order to solve this, I've added a .square class to maintain the aspect ratio. The other thing I did is use justify-content and align-items on the div surrounding the cells in order to center the text cell.

* {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  color: #fff;
  padding: 10px;
  background-color: #333;
  display: inline-block;
}

.container .cells {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .cells .image {
  flex: 0 0 50%;
  background: linear-gradient(
    135deg,
    rgb(252, 223, 138) 0%,
    rgb(243, 131, 129) 100%
  );
}

.container .cells .image img {
  width: 100%;
  height: 100%;
}

.container .cells .text {
  position: absolute;
  width: 60px;
  line-height: 60px;
  background-color: #5e2563;
  text-align: center;
}

.container p {
  margin-top: 10px;
}

.square {
  position: relative;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.square .content {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="cells">
    <div class="image square">
      <div class="content"></div>
    </div>
    <div class="image square">
      <div class="content"></div>
    </div>
    <div class="text">
      middle
    </div>
  </div>
  <p>This is a variable width and height container</p>
</div>

Responsive squared images with overlapping one in the middle

2 Answers2