Image on top of div - html

Question

So basically what im aiming to do is this:
However, i am not able to make the arrow (as img) show on top of div. Also i would appreciate if some1 could advice how to center the arrow vertically and horizontally.
Here is what i got:
section.main{
background-image: url(images/main.png);
overflow: auto;
padding: 290px 0px;
max-width: 1920px;
position: relative;
div{
height: 83px;
width: 83px;
background-color: #fff;
opacity: 0.5;
line-height: 83px;
vertical-align: middle;
text-align: center;
}
img.arr{
z-index: 100;
}
div.btnLeft{
float: left;
}
div.btnRight{
float: right;
}
p{
font-family: 'Playfair Display', sans-serif;
font-style: italic;
color: #fff;
font-size: 32px;
position: absolute;
top: 316px;
left: 375px;
}
<section class="main">
<p>Laisve kurti ir veikti!</p>
<div class="btnLeft">
<img class="arr" src="images/al.png">
</div>
<div class="btnRight">
<img class="arr" src="images/ar.png">
</div>
</section>
Thanks!

Answer 1

You can do that without any images, using a pseudo
section.main {
background-image: url(images/main.png);
overflow: auto;
padding: 90px 0px;
max-width: 1920px;
position: relative;
}
div {
position: relative;
height: 83px;
width: 83px;
background-color: lightgray;
opacity: 0.5;
}
div::after {
content: '>';
font-weight: bold;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
div.btnLeft::after {
content: '<';
}
div.btnLeft {
float: left;
}
div.btnRight {
float: right;
}
p {
font-family: 'Playfair Display', sans-serif;
font-style: italic;
color: #fff;
font-size: 32px;
position: absolute;
top: 316px;
left: 375px;
}
<section class="main">
<p>Laisve kurti ir veikti!</p>
<div class="btnLeft">
</div>
<div class="btnRight">
</div>
</section>
If you still want the images, add them like this
div::after {
content: url(images/ar.png);
}
div.btnLeft::after {
content: url(images/al.png);
}