1

I am trying to make a user-information box where there is an avatar and some additional information. I want that avatar to stay on the border of that container, vertically translated as in the example below.

However, as you can see, when I translate the element some part of it becomes invisible, since the content is not "pushed" down. How can I achieve the same result, but properly displaying the image? I tried playing with position: absolute and top and bottom, but I wasn't able to achieve the desired result.

Note: in my app, a div with class="profile-info-container" is inside a Bootstrap col, that's why width is set to 100%.

Thank you!

.profile-info-container {
  background-color: white;
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  margin: 20px 10px;
  position: relative;
  text-align: center;
  min-height: 300px;
  height: auto;
  width: 100%
}

.profile-info-image {
  transform: translateY(-50%) rotate(45deg);
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}
<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Adrian Pop
  • 1,879
  • 5
  • 28
  • 40
  • transformed elements are taken *out* of the normal flow, you can apply say `margin-top: 30%` to the `profile-info-container`? – kukkuz Apr 19 '19 at 02:31
  • @kukkuz yeah it looks good. However, let's say that under the profile picture there is some text. Because I translated it, now there is a gap. Can I do something more elegant than negative margin-tops? – Adrian Pop Apr 19 '19 at 02:36

2 Answers2

1

I think you can remove the transform:rotate for your image section to center the avatar image. I have added the margin-top:30% to your content and profile-info-container. 

.profile-info-container {
    background-color: white;
    border: 2px solid #7EA2BC;
    border-radius: 10px;
    margin: 20px 10px;
    position: relative;
    text-align: center;
    min-height: 300px;
    height: auto;
    width: 100%;
    margin-top: 30%;
}

.some-text {
    margin-top: 30%;
}

.profile-info-image {
    /*transform: translateY(-50%) rotate(45deg);*/
    border-radius: 100%;
    height: auto;
    margin: auto;
    width: 50%;
    border: 10px solid transparent;
    background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
    background-position: center center, left top, right top, left bottom, right bottom;
    background-origin: content-box, border-box, border-box, border-box, border-box;
    background-clip: content-box, border-box, border-box, border-box, border-box;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    left: 50%;
}

.profile-info-image img {
    /*transform: rotate(-45deg);*/
    border: 1px solid #7ea2bc;
    border-radius: 100%;
    height: 100%;
    width: 100%;
}

.half {
    width: 50%;
}
<div class="half">
    <div class="profile-info-container">
        <div class="profile-info-image">
            <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
        </div>
        <div class="some-text">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
</div>
Saravana
  • 3,389
  • 4
  • 21
  • 37
1

Instead of using translate, you can create a CSS Grid layout here:

  • make profile-info-container a grid container,

  • place profile-info-image in the first column spanning two rows,

  • the text below the image in the third row,

  • the border background is made using a pseudo element that spans the second and third rows.

See demo below:

.profile-info-container {
  background-color: white;
  margin: 20px 10px;
  min-height: 300px;
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
  display: grid; /* grid container */
}

.profile-info-container::after {
  content: '';
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  grid-row: 2 / 4; /* row 2 and 3*/
  grid-column: 1; /* column 1 */
}

h2 {
  grid-row: 3; /* row 3 */
  grid-column: 1; /* column 1 */
}

.profile-info-image {
  transform: rotate(45deg); /* <-- removed translate */
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  grid-row: 1 / 3; /* row 1 and 2 */
  grid-column: 1; /* column 1 */
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}
<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
    <h2>Some text here</h2>
  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95