How do you make text appear under a div without affecting the div

Question

Im trying to on hover make text appear under these circles but when ever I try to add paragraphs they just make my circles go out of place.

This is what I'm trying to achieve http://imgur.com/TZfpQIF

https://jsfiddle.net/u02e1mfe/

HTML

<div class="row">
        <p><b>Works</b></p>
        <div "row1">
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">Google</a>
                </div>
            </div>
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">nn</a>
                </div>
            </div>
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">nm</a>
                </div>
            </div>
        </div>
        <div "row2">
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">nn</a>
                </div>
            </div>
            <div class="round-button">
                <div class="round-button-circle" class=".col-md-4">
                    <a href="https://www.google.com" target="_blank" class="round-button">nff</a>
                </div>
            </div>
            <div class="round-button">

CSS

.row
{
    height: 80%;
    width: 100%;
    text-align:center;
    padding-top: 2%;
    font-size: 25;
}
.round-button {
    display:inline-block;
    position: relative;
    width:10%;
    padding-top: 2%;
}
.round-button-circle {
    height: 100px;
    position:relative;
    margin:0 auto;
    border:2px solid #f0f0f0;
    background: white no-repeat center center;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius: 100px;
    width: 100px;
    cursor:pointer;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    font-size: 0%;
}
.round-button-circle:hover {
    background:#000000;
    text-decoration-color: white;
    font-size: 50%;
  margin-bottom: 80%;
}
.round-button a{
    display:block;
    float:left;
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin-top:-0.5em;

    text-align:center;
    color:#e2eaf3;
    font-family:Verdana;
    font-size:1.2em;
    font-weight:bold;
    text-decoration:none;
}

They are close together in the fiddle but in my actual website they aren't like that so just ignore it. Im trying to make the text appear below the circle when you hover over it. Any ideas? New to CSS and HTML

Answer 1

Add these lines to .round-button a css

position: absolute;
bottom: -90px;
color: red;

(You can replace the color, is just for you to notice the change)