Hotodogo | Snippets: Profile Card Hover Effect

:root {
  --card-width: 300px;
  --card-height: calc(var(--card-width) * 1.27);
  --card-border-margin: 10px;
  --name-font-size: 36px;
}
@media screen and (max-width: 480px) {
  :root {
    --card-width: 200px;
    --card-height: calc(var(--card-width) * 1.27);
    --card-border-margin: 10px;
    --name-font-size: 22px;
  }
}
* { outline: none; box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 20px; background: #fff; }
body {
  width: 100vw;
  height: 100vh;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
}
.border {
  height: calc(var(--card-height) - var(--card-border-margin));
  width: calc(var(--card-width) - var(--card-border-margin));
  background: transparent;
  border-radius: 10px;
  transition: border 1s;
  position: relative;
}
.border:hover {
  border: 1px solid #fff;
}
.card {
  height: var(--card-height);
  width: var(--card-width);
  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;
}
.card {
  background: url("https://img1.baidu.com/it/u=2928937623,1860035774&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=724") center center no-repeat;
  background-size: var(--card-width);
}
.card:hover {
  background: url("https://img1.baidu.com/it/u=2928937623,1860035774&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=724") left center no-repeat;
  background-size: calc(var(--card-width) * 2);
}
.card:hover .name {
  opacity: 1;
}
.card:hover .fa {
  opacity: 1;
}
.name {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--name-font-size);
  color: #fff;
  margin: 20px;
  opacity: 0;
  transition: opacity 1s;
  display: block;
}
.fa {
  opacity: 0;
  transition: opacity 1s;
}
.icons {
  position: absolute;
  fill: #fff;
  color: #fff;
  height: 130px;
  bottom: 20px;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

CSS Before Head

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

HTML Head

CSS After Head

JS Before HTML Body

<div class="container">
  <div class="card card0">
    <div class="border">
      <span class="name">Jason Statham</span>
      <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>

HTML Body

HTML Foot

JS After HTML Body