to get a text inside a circle

by Sushil Dhakal

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="container">
<div class="col-md-4 col-sm-4 col-xs-12 box em-site1">
<img src="http://emosan.grafikpeople.com/wp-content/uploads/2016/06/Warmflasxhen_620x570_acf_cropped_620x570_acf_cropped.jpg">
<div class="em-site-links-left-block">
<h3 class="resize">Bouteilles <br> d'eau chaude</h3>
</div>
  
</div>
<div class="col-md-4 col-sm-4 col-xs-12 box em-site1">
<img src="http://emosan.grafikpeople.com/wp-content/uploads/2016/06/Warmflasxhen_620x570_acf_cropped_620x570_acf_cropped.jpg">
<div class="em-site-links-left-block">
<h3 class="resize">Bouteilles <br> d'eau chaude</h3>
</div>
  
</div>
<div class="col-md-4 col-sm-4 col-xs-12 box em-site1">
<img src="http://emosan.grafikpeople.com/wp-content/uploads/2016/06/Warmflasxhen_620x570_acf_cropped_620x570_acf_cropped.jpg">
<div class="em-site-links-left-block">
<h3 class="resize">Bouteilles <br> d'eau chaude</h3>
</div>
  
</div>
</div>

CSS

.em-site1 img {width:100%}
.em-site-links-left-block {background-color: #eb8677;
    opacity: 0.8;
    text-align: center;
    color: white;
    white-space: nowrap;
    border-radius: 50%;
    padding: 10%;
    bottom: 5%;
    position: absolute;
    left: 30%;}
    .em-site-links-left-block h3 {
    margin: 5px -40px;
    font-size: 1.9em;
}