<div class="container">
    <div class="card card0">
        <div class="border">
            <h2>codewithrandom</h2>
            <div class="icons">
                <i class="fa fa-codepen" aria-hidden="true"></i>
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <i class="fa fa-dribbble" aria-hidden="true"></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <i class="fa fa-facebook" aria-hidden="true"></i>
            </div>
        </div>
    </div>
</div>
.container {
    height: 100vh;
    width: 100vw;
    max-height: 800px;
    max-width: 1280px;
    min-height: 600px;
    min-width: 1000px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}
.border {
    height: 369px;
    width: 290px;
    background: transparent;
    border-radius: 10px;
    transition: border 1s;
    position: relative;
}
.border:hover {
    border: 1px solid #fff;
}
.card {
    height: 379px;
    width: 300px;
    background: #808080;
    border-radius: 10px;
    transition: background 0.8s;
    overflow: hidden;
    background: #000;
    box-shadow: 0 70px 63px -60px #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.card0 {
    background: url("https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg")
        center center no-repeat;
    background-size: 300px;
}
.card0:hover {
    background: url("https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg")
        left center no-repeat;
    background-size: 600px;
}
.card0:hover h2 {
    opacity: 1;
}
.card0:hover .fa {
    opacity: 1;
}
h2 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    margin: 20px;
    opacity: 0;
    transition: opacity 1s;
}
.fa {
    opacity: 0;
    transition: opacity 1s;
}
.icons {
    position: absolute;
    fill: #fff;
    color: #fff;
    height: 130px;
    top: 226px;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.