alevel_project/public/css/fine_card.css

.fine.card {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;

}

.fine.card h5 {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2em;
    margin: 0;
}

.fine.card {
    font-size: 1em;
    overflow: hidden;
    padding: 0;
    border: none;
    border-radius: 0.2em;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    height: 400px;
}

.fine.card .card-block {
    font-size: 1em;
    position: relative;
    margin: 0;
    padding: 1em;
    border: none;
    border-top: 1px solid rgba(34, 36, 38, .1);
    box-shadow: none;
}

.fine.card .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    max-height: 255px;
}

.fine.card figure.profile {
    /*opacity: 0;*/
    width: 40px;
    height: 40px;
    top: -25px;
}

.fine.card figure.profile img {
    /*opacity: 0;*/
    /*width: 30px;*/
    /*height: 30px;*/
}

.fine.card .card-title {
    font-size: 1.28571429em;
    font-weight: 700;
    line-height: 1.2857em;
}

.fine.card .card-text {
    clear: both;
    margin-top: .5em;
    color: rgba(0, 0, 0, .68);
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

.fine.card .card-footer {
    display: block;
    position: absolute;
    font-size: 0.9em;
    z-index: 5;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .5em 1em;
    color: rgba(0, 0, 0, .4);
    border-top: 1px solid rgba(0, 0, 0, .05) !important;
    background: #fff;
    vertical-align: middle;
}

.fine.card .card-footer i {
    float: right;
    height: 1.3em;
    border-radius: 0.1em;
    border: 1px dashed #ca5354;
    padding: 0.2em;
    display: inline-block;
    font-size: 1.5em;
    color: #ca5354;
}
.fine.card .card-footer i:hover {
    background-color: #ca5354;
    color: #eee;
}

.fine.card .card-inverse .btn {
    border: 1px solid rgba(0, 0, 0, .05);
}

.fine.card .profile {
    position: absolute;
    top: -12px;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    margin: 0;
    /*border: 1px solid #fff;*/
    border-radius: 50%;
}

.fine.card .profile-avatar {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.fine.card .profile-inline {
    position: relative;
    top: 0;
    display: inline-block;
}

.fine.card .profile-inline ~ .card-title {
    display: inline-block;
    margin-left: 4px;
    vertical-align: top;
}

.fine.card.text-bold {
    font-weight: 700;
}

.fine.card .card-block a[role="button"] {
    position: absolute;
    top: 15px;
    right: -50px;
    opacity: 0;
    z-index: -1;

    -webkit-transition: right 400ms ease-in;
    transition: right 400ms ease-in;
}

.fine.card .meta {
    padding-top: 5px;
    font-size: 0.9em;
}

.fine.card .meta a {
    text-decoration: none;
    color: rgba(50,105, 155, .7);
}

.fine.card .meta a:hover {
    color: rgba(0, 0, 0, .87);
}

.fine.card:hover .card-text {
    position: absolute;
    text-align: center;
    padding: 10px;
    padding-top: 85px;
    top: -10px;
    height: 380px;
    z-index: 4;
    opacity: 1;
    width: 100%;
    background-color: whitesmoke;
    /*-webkit-transition: all 400ms ease-in-out;*/
    /*transition: all 400ms ease-in-out;*/
}

.fine.card:hover > img {
    position: absolute;
    /*top: -30%;*/
    z-index: 1;
    opacity: 0;
    -webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.fine.card:hover figure.profile {
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 1;
    z-index: 5;
    width: 70px;
    height: 70px;

    /*-webkit-transition: opacity 400ms ease-in-out;*/
    -webkit-transition: all 400ms ease-in-out;
    /*transition: opacity 400ms ease-in-out;*/
    transition: all 400ms ease-in-out;
}

.fine.card:hover figure.profile img {
    z-index: 5;
}
.fine.card:hover .card-block a[role="button"] {
    z-index: 5;
    opacity: 1;
    top: 15px;
    right: 15px;
}
.fine.card:hover {
    box-shadow: 2px 2px 0.8em grey;
}

/*#dashboard .card:hover .card-footer {*/
/*height: 5px;*/
/*padding-top: 0;*/
/*background: #eb3719;*/
/*box-shadow: 1px 1px 1px red, 0 0 1em #ec5626;*/
/*transition: height .5s ease, background-color .5s ease;*/
/*}*/

/*#dashboard .card:hover .card-footer button {*/
/*height: 1px;*/
/*}*/