<h1>CSS Hover Effect</h1>

<div class="wrap-2">
  <div class="box">
    <div class="mask">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <hr />
        <a href="#"><i class="fa fa-twitter"></i></a>

      <p class="text">Lorem ipsum dolor.</p>
    </div>
  </div>
  <span class="go">Hover, please!</span>
</div>

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
h1 {
  font: bold 34px Tahoma;
  text-align: center;
  margin-bottom: 30px;
  color: #212121;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(120, 84, 71, .25);
}
.go {
  font: bold 14px Tahoma;
  color: #212121;
  text-align: center;
  display: block;
  margin: 0 auto;
}

@keyframes puls {
  50% {
     box-shadow: 0 0 0 15px rgba(120, 84, 71, .01);
    transform: scale(1.2, 1.2)
  }
}

/*WRAP-2*/
.wrap-2 {
  overflow: hidden;
  margin: 0 auto;
}
.box {
  width: 220px;
  height: 380px;
  background: url(https://unsplash.imgix.net/photo-1433840496881-cbd845929862?fit=crop&fm=jpg&h=700&q=75&w=1050) center no-repeat;
  background-size: cover;
  margin: 20px auto 10px;
  position: relative;
  box-shadow: 0 0 0 5px rgba(120, 84, 71, .25);
  overflow: hidden;
}

.mask {
  position: absolute;
  top: 0; left: 0 ;right: 0; bottom: 0;
  text-align: center;  
  background: rgba(0,0,0,.5);
  overflow: hidden;
  
  transform: translateY(-380px);
  transition: all 500ms ease-in-out;
}

.mask a {
  color: #FFF;
  font-size: 52px;  
  margin: 0 -5px; 
  overflow: hidden; 
  
   display: inline-block;
   vertical-align: middle;
  
  width: 0px;
  
  transition: all 500ms 1000ms ease-in-out;
}

hr {
  width: 1px;
  height: 0px;
  background: #FFF;
  border: none;
  outline: none;
  display: inline-block;
  position: relative;
  margin: 0 0px -22px; 
  transition: all 300ms 700ms ease-in-out;
}

hr:after {
  content: '\f111';
  font: normal normal normal 14px/1 FontAwesome;
  color: #FFF;
  bottom: -3px; left: -2.2px;
  font-size: 7px;
  opacity: 0;
  position: absolute;
  transition: all 300ms 700ms ease-in-out;
}
.text {
  color: #D7CCC8;
  margin: 35px 5px;
  font: 14px Tahoma;
  opacity: 0;
  transform: skew(-90deg, 0deg);
  transition: all 500ms 1000ms ease-in-out;
}

.box:hover .mask {
  transform: translateY(0px);
}
.box:hover hr {
  height: 60%;
}
.box:hover hr:after {
  opacity: 1;
}

.box:hover .mask a {
   width: 90px; 
}

.box:hover .mask a:hover i {
  color: #D7CCC8;
}

.box:hover .text {
  opacity: 1;
  transform: skew(0deg, 0deg);
}