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

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.

http://ift.tt/1oGNFAJ

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