Setting a negative margin which is a percentage of its height. Pure CSS

Question

I have a series of images, which have different captions. each of these captions needs to appear to float halfway over the bottom of the image. Here is a mockup of how this looks and also how I have structured it in divs. because there needs to be space between the bottom of the caption and whatever div is beneath, the caption cannot be absolutely positioned.

I am aware this could be done in javascript but this would be a hack so I'd prefer to find a CSS only solution.

...and here is the code so far: JS FIDDLE

.outer {
  position: relative;
  width: 320px;
  margin-bottom:24px // this needs to be the space between the bottom of the caption and the next image or whatever div is beneath.
}

.image {
  background-color: blue;
  width: 320px;
  height: 380px;
  position: relative;
  border-radius: 5px;
}

.caption {
  position: relative;
  margin-top: -24px;
  /* THIS NEEDS TO BE 50% of the Captions variable height */
}

.card {
  margin-right: 25%;
  margin-left: 5%;
  position: relative;
  background-color: #FFFFFF;
  padding: 24px;
  line-height: 24px;
}

<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="card">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet. a
    </div>
  </div>
</div>

Answer 1

Just use position: absolute and transform property to do the trick.

Here is an example: https://jsfiddle.net/nawLywc9/1/

The .block classs must be like this:

.block {
    position:relative; // This is important
    background-color:#FFFFFF;
    padding:24px;
    line-height:24px;
    bottom: -50%; // This is important
    transform: translateY(-50px); // This is important
    width: 60%;
    border-radius: 5px;
    margin: 0 auto; // Only if you need to be centered
}

Here is the preview: https://jsfiddle.net/nawLywc9/1/

Answer 2

I've achieved this with:

/* Required to expand element to height required. */
position: relative;
/* Move up by 50% of own Height. */
transform: translateY(-50%);