Top Options - JSFiddle

Top Options in square shape and hover

by Rohit Bisht

HTML

<!-- 1st row verticaly centered text in the square columns -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                Savings
                <div class="infohere">
                    Bal. $ 1039423
                    <ul class="text-center">
                        <li class="text-center option_ss" id="">
                            <a href="#">Account</a>
                        </li>
                        <li class="text-center option_ss" id="">
                            <a href="#">Balances</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                Savings
                <div class="infohere">
                    Bal. $ 1039423
                    <ul class="text-center">
                        <li class="text-center option_ss" id="">
                            <a href="#">Account</a>
                        </li>
                        <li class="text-center option_ss" id="">
                            <a href="#">Balances</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                Deposits
            </div>
        </div>
    </div>
</div>
<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                Lending
            </div>
      ...

CSS

body {
    font-size: 20px;
    text-align: center;
    background: #ECECEC;
}
p {
    margin: 0;
    padding: 0;
    text-align: center;
}
.infohere {
    display: none;
    -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
    transition: height 2s;
}
div.table:hover div.infohere {
    color: white;
    display: block;
    background-color: #535a66;
}
.dropdown-menu {
    text-align: center;
    display: none;
    background-color: #f9f9f9;
    min-width: 100%;
}
.square {
    float: left;
    position: relative;
    width: 20%;
    padding-bottom: 20%;
    /* = width for a 1:1 aspect ratio */
    margin: 1.66%;
    background-color: #1E1E1E;
    overflow: hidden;
}
.content {
    position: absolute;
    height: 90%;
    /* = 100% - 2*5% padding */
    width: 90%;
    /* = 100% - 2*5% padding */
    padding: 5%;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
}