1

I was looking at the MaterializeCSS showcase (materializecss.com/showcase.html), and I saw a feature that I wanted to incorporate into my website. I wanted to be able to make a card, picture, button, etc. be able to overlap over two divs (or sections).

For example: http://prntscr.com/bezcgo or http://prntscr.com/bezd7s or prntscr.com/bezdvx

Apparently the picture was different from the live website, but there is the same idea that I was looking for. In the first picture, the "hyperAPI" picture overlaps both the blue and white parts. For the second picture, the yellow down arrow overlaps the blue and white. Thirdly, the red down arrow overlaps the light blue and white areas.

Just clarifying, I would like to know how to do this using the MaterializeCSS framework (materializecss.com).

Thanks! Also, I couldn't post more than two links so I had to break them (sorry D:)!

spjy
  • 467
  • 8
  • 17

1 Answers1

5

That is a pretty popular effect :)

We do it with negative margins for image and eqiuvalent padding for header...

CSS

.overlap-header {
    padding: 25px 25px 125px; /* Bottom padding has extra 100px */
    text-align: center;
    background: #333;
    color: #fff;
    position: relative;
}
.half-out-button {
    position: absolute;
    bottom: 0;
    right: 5%;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin-bottom: -35px; /* Change this as you like */
}
.overlap-img {
    position: relative;
    display: block;
    max-width: 80%;
    margin: -100px auto 25px; /* top margin is -100px */
}

HTML - Button

<div class="overlap-header">
    <h1>Awesome overlapping</h1>
    <button class="half-out-button"> Half out! </button>
</div>

HTML - Image

<div class="overlap-header">
    <h1>Awesome overlapping</h1>
</div>
<img src="https://pixabay.com/static/uploads/photo/2016/04/25/23/53/euro-1353420_960_720.jpg" class="overlap-img">

Here's a codepen for that http://codepen.io/shramee/pen/zBreLN

shramee
  • 5,030
  • 1
  • 22
  • 46