My current page layout includes the following code:
<div class="card">
<div class="card-block">
<h4 class="card-title text-muted">UltimateWarrior15</h4>
<h6 class="card-subtitle text-muted">
Adventurer card
</h6>
</div>
<img data-src="holder.js/100px180/?text=Image">
<div class="card-block">
<div class="form-group row">
<label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
<div class="col-xs-10">
<label class="form-control text-muted">D</label>
</div>
</div>
</div>
</div>
However, the result is too simplistic.
https://i.sstatic.net/wte4g.png
I am looking to enhance the layout by moving the rank
value from the label
to an image asset or a larger font label that overlaps the image, like this:
https://i.sstatic.net/8MMRm.png
How can I achieve this using HTML
and CSS
?
Here is a sample: https://jsfiddle.net/46qnx1LL