How to display other elements on an image smoothly? - html

Question

I've been struggling to put some element on an image smoothly and make them responsive, but other tags such as p, h1, a etc. ruins the alignment. I would like to know what could I do?
Source code: fiddle
I would like to achieve something like this:
The problems I'm facing to are:
Text are involving into each other
Texts are overflowing out of the container
PHP:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="slider-space">
<span class="others">
<?php the_post_thumbnail(); ?>
<h1><?php the_title(); ?></h1>
<?php the_excerpt(); ?>
Read More
</span>
</header>
</article>
This code renders following out put:
<article id="post-227" class="post-227 cafes type-cafes status-publish has-post-thumbnail hentry">
<header class="slider-space">
<span class="others">
<img width="618" height="246" src="https://www.flynsarmy.com/wp-content/uploads/2012/09/nivoslider/images/up.jpg" />
<h1>Im just a h1 tag line</h1>
<p>Lorem Ipsum dolor sit amet</p>
Read More
</span>
</header>
</article>
CSS:
.slider-space {position:relative;width: 100%; height: auto; text-align: center; background: rgba(0,0,0,0.4);}
.slider-space img{ width: 100%; height: auto;}
.slider-space span, .slider-space a, .slider-space h1{color: #FFF;}

Answer 1

You should add a wrapper DIV for these elements and give it the following settings, which will place it above its (relatively position) container ( . slider-space) and center it inside that:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Here is it in your jsfiddle, the wrapper is the .overlay DIV:
https://jsfiddle.net/0Lvvf95c/