CSS Overlay on a circle image - html

Question

I have a problem with CSS overlay. I'm making a website for a dog breeder and I want to make a carousel with male and female dogs. So my idea is to have 3 circular shaped images of male dogs on one slide of a carousel and 3 of female dogs on another. All of my images are 1000x1000 so they give a perfect circle on border-radius 50%.
On the overlay of the image there should be like 80% transparent background with dog's name and pedigree over the image. But my code does not work as it should so please help :)
Here's a part of my HTML for images:
<article>
<h2>Naši psi</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active kontejner">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<img class="slika_psa" src="slika_pas.jpg"/>
<div class="info">
<h3>Sass Crveni Mayestoso</h3>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<img class="slika_psa" src="slika_pas3.jpg"/>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<img class="slika_psa" src="slika_pas2.jpg"/>
</div>
<h3 class="spol">Mužjaci</h3>
</div>
<div class="item kontejner">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<img class="slika_psa" src="slika_pas.jpg"/>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<img class="slika_psa" src="slika_pas3.jpg"/>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<img class="slika_psa" src="slika_pas2.jpg"/>
</div>
<h3>Mužjaci</h3>
</div>
<br><br>
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</article>
And part of CSS:
.kontejner {width: 90%;
margin: 25px auto;}
.slika_psa {
width: 80%;
border: 16px solid #fff;
border-radius: 50%;
background-color: #1c1c1c;
overflow: hidden;
}
.info {position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
visibility: hidden;
transition: .5s ease;
background-color: #008CBA;
}
.slika_psa:hover .info {visibility: visible;}
.carousel-inner {height: 100%;}
article {display: table;
width: 100%;
height: 100vh;
margin-top: 50px;
background-image: url('background..jpg');}
I can't figure it out how to make perfect circular overlay...Any help appreciated.