I am trying to have a UI like this :

This is how I have tried doing it :

1. A div at the top as cover Image
2. The next div containing two child divs as profile photo & UI details as -

<div>Image Cover photos<div>
<div style="display : flex;">
  <div>profile photo</div>
  <div>UI Details Card</div>
</div>

1. Then I'm using the transform : translateY(-50%) to the profile photo div to move 50 percent of the portion on top of the background cover photo.
2. This, however creates a problem, the UI details remains at the same place(which is ideal), but the baseline has been changed.I want it to have only 50% of the height, so the baseline matches with the profile photo as well, and also UI details wcard will have some text, I do not want it to overlap on the Cover Image background as well(as that of profile photo). How can I achieve this?

CodePudding user response：

One way to solve this problem is to use CSS grid to place everything.

body {
  padding: 100px;
}

.card {
  height: 300px;
  width: 300px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(3, 1fr);
  outline: 1px solid;
}

.details {
  background-color: blanchedalmond;
  grid-area: 3/2/4/3;
}

.photo {
  background-color: aquamarine;
  grid-area: 2/1/4/2;
}

.cover {
  grid-area: 1/1/3/3;
  background-color: grey;
}

.cover img,
.photo img {
  height: 100%;
  width: 100%;
}

<div >
  <div >
    <img src="https://source.unsplash.com/random/?1" alt="">
  </div>
  <div >
    <img src="https://source.unsplash.com/random/" alt="">
  </div>
  <div >Details here</div>
</div>

Here's a diagram showing the different grid areas :

Notice the overlap region between the blue box (photo) and the red box (cover). Since the photo div appears after the cover div in the DOM, the photo div will have higher priority and will occupy this overlap region.

CodePudding user response：

You can make a 2 column, 3 row grid and place items where you want them.

Here's a simple example:

.container {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 30vw;
  height: 20vw;
}

.container :nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  background: red;
}

.container :nth-child(2) {
  grid-column: 1;
  grid-row: 2 / span 2;
  background: green;
}

.container :nth-child(3) {
  background: blue;
}

<div >
  <div></div>
  <div></div>
  <div></div>
</div>

Obviously you will want to alter the relative sizes of the grid to suit your particular case.

Note: it depends on whether you want to put some text in the first item so that it comes directly above the second item or not as to whether you start the first div in the first column or the second column.