How to overlap image half way with container like example shown

Question

I'm trying to create this view but I'm not sure how to get the image to overlap half way with the black background. I've got an svg with the full wide graphic of the car and line where the line breaks in color.

I'm using Bulma as a framework. How would I get the image to overlap a black container as well as the white container?

Here's an example of what I've got now: https://codesandbox.io/s/bulma-autocomplete-forked-kdu4h?file=/src/index.js

Answer 1

To make the img responsive you want it to keep its aspect ratio while filling the same width as the black element but you want it to be translated up enough that the break between the white and the black line always stays at the top of the container.

This snippet does that by having the img as a child of the black element and the same width as it but translated upwards by just the right % of its height that the black line starts just above the black element. This is almost at 50% of its height, actually just very slightly more.

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

div {
  width: 100vw;
  height: 50vh;
  margin: 0;
  padding: 0;
  position: relative;
  top: 40%; /* just for this demo */
  background-color: black;
}

img {
  width: 100%;
  height: auto;
  transform: translateY(-52.5%);
  margin: 0;
  padding: 0;
  position: absolute;
}

<div>
  <img src="https://i.sstatic.net/mhA4r.png" />
</div>