Hero Section Overlapping Next Section

Hey folks, I need help. I’m trying to create a Hero section with an image using the IMG tag instead of adding an image to background: url(…) in css. I had a look at the responsive-hero-section.html from the Zurb Building Block Kits (real-estate-travel).
The problem I’m having is on small screens, the text bleeds over the next DIV element below the Hero block (or perhaps the lower block bleeds into the Hero block, not sure which is really happening).

I couldn’t find a way to do it with the regular Foundation classes and resorted to some modified css I found on a StackOverlow post.

I’m at a loss and would love some advice.

    <div id="hero" class="hero grid-y">
        <img class="" alt="hero image" src="FullWidthImage.jpg" />
        <div class="hero-overlay cell small-1 large-2">
            <div class="cell grid-x">
                <div class="cell small-8 medium-5 small-offset-1 medium-offset-2 large-offset-2">
                    <h4 class="hero-sub-header text-uppercase">Euismod lacinia at quis risus sed</h4>
                    <h1 class="hero-main-header">Vitae proin sagittis nisl rhoncus mattis rhoncus urna</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt augue. </p>
                    <p>Dui vivamus arcu felis bibendum ut tristique et egestas. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. Sed velit dignissim sodales ut. </p>
                    <p>Porttitor massa id neque aliquam vestibulum. Ut sem viverra aliquet eget sit amet tellus. </p>
                    <a class="button secondary round medium show-for-medium" href="./" target="@Model.CallToAction.Target">Call to Action</a>
                    <a class="button secondary round small show-for-small-only" href="./" target="@Model.CallToAction.Target">Call to Action</a>
                </div>
            </div>
        </div>
    </div>

    <div class="grid-container margin-top-3">
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6">
            <h2>First Blurb</h2>
            <h5 class="lead">Yada yada yada blah blah blah....</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Odio ut enim blandit volutpat maecenas volutpat. Porta non pulvinar neque laoreet. At varius vel pharetra vel turpis nunc eget lorem dolor. Pellentesque elit ullamcorper dignissim cras. Nibh cras pulvinar mattis nunc sed blandit libero volutpat sed. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Purus ut faucibus pulvinar elementum integer enim neque. Ac turpis egestas integer eget aliquet nibh praesent. Eget aliquet nibh praesent tristique magna. Enim nec dui nunc mattis enim ut. A lacus vestibulum sed arcu non odio euismod. In hac habitasse platea dictumst quisque sagittis. Tristique magna sit amet purus gravida quis blandit turpis cursus. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod.
            </p>
            <p>more of the same old fluff.</p>
        </div>
        <div class="cell medium-6">
            <h2 class="">Second Blurb</h2>
            <h6>More yada yada yada blah blah blah...</h6>
            <p>Quam id leo in vitae turpis massa. Varius sit amet mattis vulputate. Orci sagittis eu volutpat odio facilisis mauris sit. Diam vulputate ut pharetra sit. Lorem donec massa sapien faucibus et molestie ac feugiat sed. Fringilla ut morbi tincidunt augue interdum. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Turpis egestas sed tempus urna et pharetra. Enim eu turpis egestas pretium aenean pharetra magna. At erat pellentesque adipiscing commodo.                
            </p>
            <p>Even more of the same old fluff</p>
        </div>
      </div>
    </div>

Here is the scss for the .hero class:

.hero .hero-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: 6rem;

    @include breakpoint(small only) {
        margin-top: 1rem;
    }
}

My first thought, would be to set overflow:hidden on .hero. Initially that may result in your text getting cut off since it appears to already by running beyond the parent bounds. If that’s the case you may need to explore your image sizing options.

However, in these scenarios I have fully moved to using CSS Grid. You can achieve a layering effect like so:

.hero {
  display: grid;
  grid-template-areas: "hero";
}

/* Probably better to give this a class too */
.hero > img {
  grid-area: hero;
}

.hero > .hero-overlay {
  grid-area: hero;
}

Let me know if you want to chat more.

Thanks @chet-tbf I’ll investigate that. I had already created a workaround the other day by setting overflow:hidden but I will definitely look at your suggestion using CSS Grid.

Is CSS Grid compatible with Foundation if I’m using their XY Grid on the same page, in the same section of code (ie. a hybrid approach) or would I have to use CSS Grid exclusively on the page and not use Foundation’s grid?

I wouldn’t expect them to conflict much, especially since you’d be limiting the CSS grid styles to just the Hero Section. I feel certain that the XY Grid is all Flexbox based rather than Grid Based anyway.

Worst case, you may not be able to use the XY Grid on children of your .hero.