Is there a way to eliminate the gap after applying a CSS transform: translateY(-50%) so that the content flows seamlessly?
I have experimented with various methods but haven't been successful in moving the element up by 50% of its own height. Using negative margin as a percentage doesn't work effectively, and setting a negative margin on the following element isn't feasible as it should be based on the header's height.
HTML:
<div class="header">
<div class="featured-image">
<!-- Placeholder for featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is excessive space above the "article-body" class. I want the content to flow naturally after the "title-container", but using translateY only affects visual presentation. An alternative method is required to move the yellow block up by 50% of its own height.</p>
</div>
CSS:
.header {
width: 100%;
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
transform: translateY(-50%);
background-color: yellow;
}
JS Fiddle:
https://jsfiddle.net/robertirish/tyh18orq/16/
Perhaps achieving this requires Javascript, but it would be preferable to accomplish it using pure CSS without relying on JS or media queries.
Thank you for your assistance.