<div class="card">
            <div class="face top">
                <div class="content">

<svg class="icon" version="1.1"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
   x="0px" y="0px" width="59.5px" height="75.6px" viewBox="0 0 59.5 75.6" style="enable-background:new 0 0 59.5 75.6;"
   xml:space="preserve">
<style type="text/css">
  .st0{stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
  <g>
    <path class="st0" d="M6.2,8L6.2,8c2.9,0,5.2,2.3,5.2,5.2v26.7H1V13.2C1,10.3,3.3,8,6.2,8z"/>
  </g>
  <g>
    <path class="st0" d="M37.7,1L37.7,1c2.9,0,5.2,2.3,5.2,5.2v33.7H32.4V6.2C32.4,3.3,34.8,1,37.7,1z"/>
    <path class="st0" d="M42.9,40.5v17.8c0,9-7.3,16.3-16.3,16.3h-9.3C8.3,74.6,1,67.3,1,58.3V40.9c0-4.5,3.7-8.2,8.2-8.2h26
      C39.4,32.7,42.9,36.2,42.9,40.5z"/>
    <g>
      <path class="st0" d="M16.7,25L16.7,25c2.9,0,5.2,2.3,5.2,5.2v5c0,2.9-2.3,5.2-5.2,5.2h0c-2.9,0-5.2-2.3-5.2-5.2v-5
        C11.5,27.3,13.8,25,16.7,25z"/>
      <path class="st0" d="M27.1,23L27.1,23c2.9,0,5.2,2.3,5.2,5.2v7c0,2.9-2.3,5.2-5.2,5.2h0c-2.9,0-5.2-2.3-5.2-5.2v-7
        C21.9,25.4,24.2,23,27.1,23z"/>
    </g>
  </g>
  <path class="st0" d="M19.1,74.6h8.3c3,0,5.7-0.8,8.1-2.3c1-0.6,2-1.4,2.9-2.3L57,51.5c2-2,2-5.4,0-7.4c-2-2-5.4-2-7.4,0L43,50.7
    c-2.5-3.1-6.3-5-10.5-5c-7.5,0-13.5,6.1-13.5,13.5"/>
</g>
</svg>

                    <h3>Hover</h3>
                </div>
            </div> 
            <div class="face bottom">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                        <a href="#">Read More</a>
                </div>
            </div>
        </div>

body{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: consolas;
}
svg.icon {
  fill:whitesmoke;
}
.card{
    position: relative;
    cursor:pointer;
}
.card .face {
    width: 300px;
    height: 200px; 
    /*https://cubic-bezier.com/#.17,.67,.83,.67 */
    transition: .7s cubic-bezier(.75,-0.5,0,1.75);
}
.card .face.top{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}

.card:hover .face.top{
    background: #46aba8;
    transform: translateY(0);
}
.card .face.top .content{
    opacity: 0.2;
    transition: 0.5s;
}
.card:hover .face.top .content{
    opacity: 1;
}
 .card .face.top .content img{
    max-width: 100px;
}

.card .face.top .content h3{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}

.card .face.bottom{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(-100px);
}
.card {
  transition:all ease 1s;
}
.card:hover .face.bottom {
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.card:hover .face.bottom{
    transform: translateY(0);
}
.card .face.bottom .content p{
    margin: 0;
    padding: 0;
}
.card .face.bottom .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 10px;
    border: 1px solid #333;
    transition:all ease .5s;
}
.card .face.bottom .content a:hover{
    background: #333;
    color: #fff;
}