Natalie sig

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<style>
#natalie-sig{
  width: 500px;
  height: 200px;
  background: url(https://via.placeholder.com/500x200);
  position: relative;
  margin: 0px auto;
  outline: 1px solid #DF4158;
  border: 3px solid #fff;
}

#natalie-sig ::-webkit-scrollbar {
  width: 5px;
  border-radius: 50px;
}

#natalie-sig ::-webkit-scrollbar-track {
  background: transparent;
}

#natalie-sig ::-webkit-scrollbar-thumb {
  background: transparent;;
  border: 1px solid #DF4158;
  border-radius: 50px;
}

#natalie-sig .border1{
  width: 0px;
  height: 0px;
  position: absolute;
  background: transparent;
  top: 10px;
  left: 11px;
  border-left: 1px solid #DF4158;
  border-top: 1px solid #DF4158;
  overflow: hidden;
  -webkit-transition: 0.5s ease-in 0.8s;
  transition: 0.5s ease-in 0.8s;
}
#natalie-sig:hover .border1{
  width: 480px;
  height: 180px;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}
#natalie-sig .border2{
  width: 0px;
  height: 0px;
  position: absolute;
  background: transparent;
  bottom: 9px;
  right: 8px;
  border-right: 0.5px solid #DF4158;
  border-bottom: 0.5px solid #DF4158;
  overflow: hidden;
  -webkit-transition: 0.5s ease-in 0.8s;
  transition: 0.5s ease-in 0.8s;
}
#natalie-sig:hover .border2{
  width: 480px;
  height: 180px;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}

#natalie-sig .base{
  width: 500px;
  height: 200px;
  position: absolute;
  background: #fff;
  top: 0.5px;
  left: -500px;
  opacity: 0.88;
  -webkit-transition: 0.5s ease-in 0.3s;
  transition: 0.5s ease-in 0.3s;
  overflow: hidden;
}
#natalie-sig:hover .base{
  -webkit-transition: 0.5s ease-in 0.5s;
  transition: 0.5s ease-in 0.5s;
  left: 0px;
}

#natalie-sig .line{
  width: 270px;
  height: 28px;
  position: absolute;
  background: transparent;
  border-left: 1px solid #DF4158;
  border-bottom: 1px solid #DF4158;
  top: 102px;
  left: 105px;
  opacity: 0.9;
}

#natalie-sig .icon{
  width: 90px;
  height: 90px;
  position: absolute;
  top: 25px;
  left: 60px;
  overflow: hidden;
  z-index: 2;
}
#natalie-sig .icon img{
  width: 65px;
  height: 65px;
  border-radius: 50px;
  border: 1px solid #DF4158;
  padding: 5px;
}

#natalie-sig .title{
  position: absolute;
  background: transparent;
  top: 30px;
  left: 165px;
  width: 145px;
  height: 17px;
  border-bottom: 1px solid #DF4158;
  text-align: justify;
  line-height: 10px;
  letter-spacing: 2px;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  color: #DF4158;
  font-weight: bold;
}

#natalie-sig .textbox{
  width: 135px;
  height: 50px;
  position: absolute;
  background: transparent;
  bottom: 70px;
  left: 165px;
  overflow: auto;
  color: #000;
  text-align: justify;
  line-height: 10px;
  letter-spacing: 0px;
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  padding-right: 9px;
  z-index: 3;
}

#natalie-sig .navbox{
  width: 175px;
  height: 20px;
  position: absolute;
  bottom: 23px;
  right: 90px;
  overflow: hidden;
  border: 1px solid #DF4158;
  border-radius: 20px;
  padding-top: 5px;
  z-index: 4;
}

#natalie-sig .sf{
  color: #DF4158;
  font-size: 14px;
  margin: 3px;
}
#natalie-sig .sf:hover{
  color: #111;
}

#natalie-sig a{
  color: #DF4158;
  text-decoration: none;
}

#natalie-sig .triangle{
  width: 0px;
  height: 0px;
  position: absolute;
  top: 0px;
  right: -1px;
  background: #DF4158;
  -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  -webkit-transition: 0.5s ease-in 0.3s;
  transition: 0.5s ease-in 0.3s;
}
#natalie-sig:hover .triangle{
  width: 170px;
  height: 100px;
  -webkit-transition: 0.5s ease-in 0.5s;
  transition: 0.5s ease-in 0.5s;
}

#natalie-sig .box{
  width: 480px;
  height: 180px;
  position: absolute;
  top: 0px;
  left: -10px;
  background: transparent;
  -webkit-transition: 0.3s ease-in 0s;
  transition: 0.3s ease-in 0s;
  opacity: 0;
}
#natalie-sig:hover .box{
  -webkit-transition: 0.3s ease-in 1s;
  transition: 0.3s ease-in 1s;
  opacity: 1;
}

</style>

<center>
<div id='natalie-sig'>

  <div class='border1'>

      <div class='base'></div>
      <div class='triangle'></div>

      <div class='box'>
          <div class='line'></div>

          <div class='icon'>
            <a href="https://shine.jcink.net/index.php?showuser=29444" title="hanie ©">
            <img src="http://via.placeholder.com/65x65"></a>
          </div>

          <div class='title'>short title here</div>
          <div class='textbox'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sit amet diam eu dictum. In eget mollis metus.  Nunc vehicula risus at neque semper pulvinar. Nullam tempor imperdiet sapien, at rhoncus massa tincidunt ut.
          </div>

          <div class='navbox'>
            <a href="#" title="gallery"><span class="sf sf-donut-o"></span></a>
            <a href="#" title="hof"><span class="sf sf-crown-o"></span></a>
            <a href="#" title="archive"><span class="sf sf-save-o"></span></a>
            <a href="#" title="awards team"><span class="sf sf-trophy-o"></span></a>
            <a href="#" title="extra"><span class="sf sf-cherry-o"></span></a>
            <a href="#" title="extra"><span class="sf sf-cupcake-o"></span></a>
          </div>
      </div>

  </div>

  <div class='border2'>

</div>
</center>