css Question posted in
Some basic documentation can be found here.

CSS make image float outside container

I have this

img {
  display: block;
  max-width: 100%;
}

.hero {
  padding-inline: 2rem;
  margin-inline: auto;
  margin-block: 10rem;
  border: 1px solid blue;
}

.hero-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr;
  max-width: 800px;
  border: 1px solid red;
  margin-inline: auto;
}
<div class="hero">
  <div class="hero-layout">
    <div class="hero-content">
      <h1>Lorem Ipsum</h1>
      <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, architecto veritatis eligendi aperiam nobis rerum dignissimos dolores cumque alias beatae exercitationem culpa, praesentium reprehenderit perferendis ab laudantium nulla non tenetur?
      </p>
    </div>
    <img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=1950&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="hero-image">
  </div>
</div>

This is the Result

I want to achieve this (did with photoshop), what is the best approach?

I tried using position relative and negative top, but that doesn’t shrink the hero-layout div.

Tags:

3

Answers


  1. 0

    The .hero-layout is already has same height as the content. It’s just being affected by the image.

    So what you need is to modify the styles of the img:

    img {
  display: block;
  max-height: 120%;
  position: absolute;
  right: 0;
  top: -10%;
}

    I set the max-height to 20% more so it will span bigger than the container. top to -10% so it will be positioned in the middle.

    Also, you need to add position: relative; in your .hero-layout so the position of the img will work.

    Here is a working sample:

    img {
  display: block;
  max-height: 120%;
  position: absolute;
  right: 0;
  top: -10%;
}

.hero {
  padding-inline: 2rem;
  margin-inline: auto;
  margin-block: 10rem;
  border: 1px solid blue;
}

.hero-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr;
  max-width: 800px;
  border: 1px solid red;
  margin-inline: auto;
  position: relative;
}
    <div class="hero">
  <div class="hero-layout">
    <div class="hero-content">
      <h1>Lorem Ipsum</h1>
      <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, architecto veritatis eligendi aperiam nobis rerum dignissimos dolores cumque alias beatae exercitationem culpa, praesentium reprehenderit perferendis ab laudantium nulla non tenetur?
      </p>
    </div>
    <img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=1950&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="hero-image">
  </div>
</div>

    Run the snippet in Full page for better view.

    Login or Signup to reply.
  2. 0 
    img {
  display: block;
  max-width: 100%;
  margin-top: -3%;
}

.hero {
  padding-inline: 2rem;
  margin-inline: auto;
  margin-block: 10rem;
  border: 1px solid blue;
  margin-top: 5% !important;
}

.hero-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 2fr;
  max-width: 800px;
  border: 1px solid red;
  margin-inline: auto;
  height: 45% !important;
}
.hero-content {
    height: 21% !important;
}
    <div class="hero">
  <div class="hero-layout">
    <div class="hero-content">
      <h1>Lorem Ipsum</h1>
      <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, architecto veritatis eligendi aperiam nobis rerum dignissimos dolores cumque alias beatae exercitationem culpa, praesentium reprehenderit perferendis ab laudantium nulla non tenetur?
      </p>
    </div>
    <img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=1950&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="hero-image">
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Note: this snippet gets only part way to a complete answer and is given here in the hope someone can build on it.

    As the lines are there only for visual effect we can use pseudo elements to draw them.

    This snippet draws the horizontal blue lines on a before pseudo element as it is possible to use the height of the hero-content.

    <!doctype html>
<html>

<head>
  <style>
    body {
      background-color: black;
    }
    
    img {
      display: block;
      max-width: 100%;
      margin: 0;
      z-index: 1;
    }
    
    .hero {
      padding-inline: 2rem;
      margin-inline: auto;
      margin-block: 10rem;
      overflow: hidden;
    }
    
    .hero-layout {
      display: grid;
      gap: 0;
      rgap: 2rem;
      grid-template-columns: 1fr 2fr;
      max-width: 800px;
      margin-inline: auto;
      color: white;
    }
    
    .hero-content::before {
      content: '';
      position: absolute;
      left: -100vw;
      width: 200vw;
      height: 100%;
      border: blue solid 1px;
      box-sizing: border-box;
    }
    
    .hero-content {
      height: fit-content;
      width: 100%;
      border: solid red 1px;
      border-width: 1px 0 1px 1px;
      border-color: magenta transparent magenta red;
      padding-right: 1em;
      position: relative;
      box-sizing: border-box;
      margin: auto 0;
    }
    
    h1,
    p {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div class="hero">
    <div class="hero-layout">
      <div class="hero-content">
        <h1>Lorem Ipsum</h1>
        <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, architecto veritatis eligendi aperiam nobis rerum dignissimos dolores cumque alias beatae exercitationem culpa, praesentium reprehenderit perferendis ab laudantium nulla non
          tenetur?
        </p>
      </div>
      <img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=1950&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="hero-image">
    </div>
  </div>
</body>

</html>

    However, to place a left hand vertical line we’d have to position left relative to the body element but keep the height relative to the hero-content. I can’t see a way of doing this without adding elements to the DOM.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search