4

I have a top div, an image, and a bottom div in my html and I want to overlap the 2 divs into my image, the first div should cover some area in the top part of the image, and the bottom div should cover some area in the bottom part of the image, the div should be the one covering the image (on front of display). how would I do that in a clean way (without leaving white spaces) and make it responsive in respect to the width of the view or parent div?

here is my html

* {
  padding: 0px;
  margin: 0px;
}

#image {
  max-width: 100%;
}

.rects {
  height: 100px;
}

#rect-top {
  background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479));
}

#rect-bottom {
  background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75));
}
<h1>Start</h1>
<div id="rect-top" class="rects"></div>
<img id="image" src="image-with-gradient.jpg">
<div id="rect-bottom" class="rects"></div>
<h1>End</h1>

this is what I want to achieve:

enter image description here

as you can see there is no white space before and after the h1 tags

connexo
  • 53,704
  • 14
  • 91
  • 128
0xdeadbeef
  • 500
  • 3
  • 17
  • 1
    Someone ate your `` tag. You can likely use negative margins on the center image for the overlap. – Raxi Jan 07 '22 at 03:15
  • I tried your suggestion I added ```margin: -100px 0px;``` in the ```#image``` and it work adjusting the positions but the image is the one covering the divs, how would I make the divs cover the image instead? – 0xdeadbeef Jan 07 '22 at 03:28
  • 2
    Set a higher `z-index` on the one you want on top, such as `z-index: 200;`. – Raxi Jan 07 '22 at 03:30
  • @Raxi thanks that worked, this is the first time I heard ```z-index``` – 0xdeadbeef Jan 07 '22 at 03:37
  • 1
    Yea it's often best to avoid using it when possible. But it's intended purpose is exactly the thing you're trying to do, so here it's appropriate. – Raxi Jan 07 '22 at 03:43

1 Answers1

2

Wrap your image and overlapping divs in a div. Inside that, position your overlap div elements absolute.

As a sidenote, don't use id for styling purposes. Also note that any id in your page can only live on a single element; id must be unique per-document.

Instead of creating meaningless markup for the gradients, you can use the pseudo elements ::before and ::after here.

* {
  padding: 0;
  margin: 0;
}

.image-container {
  padding: 50px 0;
  position: relative;
}

.image {
  max-width: 100%;
}

.image-container::before,
.image-container::after {
  content: '';
  height: 100px;
  position: absolute;
  width: 100%;
}

.image-container::before {
  background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479));
  top: 0;
}

.image-container::after {
  background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75));
  bottom: 0;
}
<h1>Start</h1>
<div class="image-container">
  <img class="image" src="https://placekitten.com/g/1920/1080">
</div>
<h1>End</h1>

This also makes the use of z-index obsolete because elements with position: absolute are automatically on top of unpositioned elements.

connexo
  • 53,704
  • 14
  • 91
  • 128
  • Is it just on my device or the new edited seems to display the bottom gradient wrong? – 0xdeadbeef Jan 10 '22 at 05:13
  • it seems that adding ```left: 0;``` solve that for the ```.image-container::after```, anyways this is a super clean solution thanks. – 0xdeadbeef Jan 10 '22 at 05:15