.item-img {
    position: relative;
    display: inline-block;
    margin: 0 20px 0 20px;
    width: 220px
}

.top {
    position: absolute;
    bottom: 0px;
    width: 100%;
    color: #fff;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #2f2f2f;
    background: rgba(255, 255, 255, 0.8);
    visibility: visible;
}
.p-hidden {
    position: absolute;
    bottom: -142px;
    background: #FFFFFF;
    width: 220px;
    height: 150px;
    visibility: visible;
}

.p-content {
    position: absolute;
    top: 4px;
    /*bottom: -46px;*/
    background-color: rgba(255, 228, 0, 0.8);
    width: 220px;
    height: 150px;
    visibility: visible;
    animation: move_out 500ms forwards;
    line-height: 50px;
}


.item-img:hover > .p-content{
    animation:move_in 500ms;
    -moz-animation: move_in 500ms;
    -webkit-animation: move_in 500ms;
    -o-animation: move_in 500ms;
    animation-fill-mode: forwards;
    visibility: visible;
}

.item-img:hover > .top{
    visibility: hidden;
}


@keyframes move_in
{
    from {top: 326px;}
    to {top: 176px;}
}

@keyframes move_out
{
    from {top: 176px;}
    to {top: 326px;}
}