Lottie sig

<style>
#lottie-sig{
  width: 500px;
  height: 200px;
  outline: 1px solid #C46DD3;
  border: 4px solid #fff;
  margin: 0px auto;
  background: url(http://via.placeholder.com/500x200);
  position: relative;
  overflow: hidden;
}

#lottie-sig ::-webkit-scrollbar {
  width: 3.5px;
}

#lottie-sig ::-webkit-scrollbar-track {
  background: #ccc;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

#lottie-sig ::-webkit-scrollbar-thumb {
  background: #B65AD8;
  border: 1px solid #B65AD8;
}

#lottie-sig .left{
  position: absolute;
  width: 208px;
  height: 200px;
  top: 0px;
  left: -210px;
  background: #C069E0;
  opacity: 0.88;
  -webkit-clip-path: polygon(0 0, 100% 0%, 14% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 20% 100%, 0% 100%);
  opacity: 0.8;
  -webkit-transition: 0.5s ease-in 0.3s;
  transition: 0.5s ease-in 0.3s;
}
#lottie-sig:hover .left{
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
  left: 0px;
}

#lottie-sig .right{
  position: absolute;
  width: 460px;
  height: 200px;
  bottom: 0px;
  right: -460px;
  opacity: 0.96;
  background: #EAECF0;
  -webkit-clip-path: polygon(36% 0, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(36% 0, 100% 0%, 100% 100%, 0% 100%);
  -webkit-transition: 0.5s ease-in 0.3s;
  transition: 0.5s ease-in 0.3s;
}
#lottie-sig:hover .right{
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
  right: -0.5px;
}

#lottie-sig .icon{
  position: absolute;
  width: 60px;
  height: 60px;
  top: 30px;
  right: 106.5px;
}
#lottie-sig .icon img{
  width: 75px;
  height: 75px;
  border: 0.5px solid #B65AD8;
  padding: 12px;
  background: #fff
}

#lottie-sig .box{
  position: absolute;
  width: 360px;
  height: 140px;
  top: 30px;
  left: 60.5px;
  background: transparent;
  border: 0.5px solid #BB6DD6;
  border-right: 4px solid #AA5DC5;
  border-bottom: 0.5px solid #AA5DC5;
  -webkit-clip-path: polygon(30% 0, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(33% 0, 100% 0%, 100% 100%, 0% 100%);
}

#lottie-sig .navbar{
  position: absolute;
  width: 320px;
  height: 29px;
  bottom: 5px;
  right: 5px;
  background: #BB6DD6;
  border: 0.5px solid #fff;
  border-radius: 100px;
  font-family: 'Courier New';
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 29px;
  color: #fff;
}

#lottie-sig .navbar a{
  text-decoration: none;
  color: #fff;
  margin: 8px;
}
#lottie-sig .navbar a:hover{
  border-bottom: 0.5px dashed #fff;
  font-style: italic;
}

#lottie-sig .box .dvdr1{
  position: absolute;
  width: 50px;
  height: 23px;
  bottom: 9px;
  right: 9px;
  background: #fff;
  border-radius: 0px 100px 100px 0px;
}

#lottie-sig .box .dvdr2{
  position: absolute;
  width: 50px;
  height: 23px;
  bottom: 9px;
  left: 38.5px;
  background: #fff;
  border-radius: 100px 0px 0px 100px;
}

#lottie-sig .textbox{
  position: absolute;
  width: 100px;
  height: 58px;
  top: 5.5px;
  right: 93px;
  background: #fff;
  font-family: 'Consolas', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0px;
  line-height: 10px;
  color: #222;
  overflow: auto;
  text-align: justify;
  border: 18px solid #fff;
  padding-right: 8px;
}

#lottie-sig .triangle{
  position: absolute;
  width: 72px;
  height: 88px;
  bottom: 40.5px;
  left: 45.5px;
  background: #BB6DD6;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

#lottie-sig .cred{
  position: absolute;
  width: 75px;
  height: 75px;
  top: 10px;
  right: 0px;
  background: transparent;
}

#lottie-sig .hov{
  position: absolute;
  width: 500px;
  height: 200px;
  bottom: -20px;
  right: 0px;
  background: transparent;
  -webkit-transition: 0.3s ease-in 0s;
  transition: 0.3s ease-in 0s;
  opacity: 0;
}
#lottie-sig:hover .hov{
  opacity: 1;
  bottom: 0px;
  -webkit-transition: 0.3s ease-in 0.5s;
  transition: 0.3s ease-in 0.5s;
}

</style>

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

  <div class='left'></div>
  <div class='right'></div>

  <div class='hov'>
      <div class='icon'>
          <img src="http://via.placeholder.com/75x75">
      </div>

      <div class='box'>
          <div class='textbox'>
            Lorem ipsum dolor sit amet. Aenean venenatis lacus mi, pellentesque erat pulvinar. Nam volutpat bibendum cursus.  Integer efficitur suscipit sapien ut vulputate.
          </div>

          <div class='navbar'>
            <a href="#">gallery</a>
            <a href="#">deviantart</a>
            <a href="#">twitch</a>
          </div>

          <div class='dvdr1'></div><div class='dvdr2'></div>
          <div class='triangle'></div>

          <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
          <div class='cred'></div></a>
     </div>
  </div>

</div>
</center>