How can I put an image on top of another image? - html

Question

I have seen a few that explains how to do it with absolute position. I'm currently making a Bootstrap 3 site, so I cannot use the absolute attribute.
Below is a quick mock-up of what I'm talking about (note that the play buttons won't be burned into the images below)
Also, if you could explain how to make a similar gradient, it would be nice.
I have tried to use the z-index attribute, but when using it I couldn't figure out how to position the elements relative to elements with lower z-indexes.
Edit:
The play-button (seen on top of the images) will not be a part of the jpg image asset. Rather, it will be its own svg asset put on top of the jpg (thumbnail) image. I choose this way so that I can animate the "play-button" independently.
Neither will the gradient, title, subtitle or "article-tag" be a part of the thumbnail image asset.
The red "divider's" will be its own svg asset as well.
Ideally, I would like to be able to place <img></img> objects on top of another <img></img> bounding box and be able to move it relative to the bounding box. eg x=50% y=50% for centering. The method should be scalable so that I can have more than two layers as well as having multiple objects on the same layer.
Note: The thumbnail images will be stored on the web server in a resolution of 1920x1080. When trying to use the "divider" as a background image I had a clipping issue:
It wouldn't expand its parent <div>. (also, is there a way to detect user's screen size and rescale the pictures accordingly (on the server) in order to increase loading speed? Like a cookie or something?)
I'm sorry for probably breaking tons of rules on the site, this is my first question.

Answer 1

regarding the gradient, a short css writing will be:
background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);
In addition: I've created a JSFiddle for you for the layouting :)
HTML:
<div class="relative-container">
<div class="absolute-container">
<div class="flex-1">
Img 1
</div>
<div class="flex-1">
Img 2
</div>
<div class="flex-1">
Img 3
</div>
</div>
</div>
CSS:
.relative-container{
width:300px;
height:200px;
background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);
}
.absolute-container{
width:300px;
height:100px;
display:flex;
align-items: center;
position:absolute;
top:55px;
}
.flex-1{
flex:1;
border:1px dashed black;
text-align:center;
}