Mari sig (with hover)

<style>
:root{
  --mainBg: #ffffff;
  --sigBorder: #A2C298;
  --leftOverlay: #D1E9CA;
  --title: #222222;
  --statusBg: #ffffff;
  --statusText: #E2CC6C;
  --textboxBg: #ffffff;
  --links: #E2CC6C;
  --linksHover: #A2C298;
  --scrollThumb: #A2C298;
  --scrollBorder: #A2C298;
}

#mari-sigcode{
  position: relative;
  margin: 10px auto;
  overflow: hidden;
  width: 300px;
  height: 150px;
  background: var(--mainBg);
  border: 0.5px solid var(--sigBorder);
}

#mari-sigcode .right-bg{
  position: absolute;
  width: 250px;
  height: 100px;
  right: 0px;
  bottom: 0px;
  background: url(https://i.imgur.com/cKKqkTc.gif);
}

#mari-sigcode .left-overlay{
  position: absolute;
  width: 135px;
  height: 150px;
  left: 0px;
  top: 0px;
  background: var(--leftOverlay);
  mix-blend-mode: multiply;
}

#mari-sigcode .icon img{
  position: absolute;
  width: 70px;
  height: 70px;
  left: 33px;
  top: 40px;
}

#mari-sigcode .content-1{
  position: absolute;
  width: 165px;
  height: 150px;
  right: 0px;
  top: 0px;
  opacity: 1;
  transition: 0.2s;
}
#mari-sigcode:hover .content-1{
  opacity: 0;
  right: -20px;
  transition: 0.2s;
}

#mari-sigcode .title{
  position: absolute;
  width: 165px;
  left: 20px;
  top: 36px;
  color: var(--title);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 21px;
  text-align: left;
  text-transform: capitalize;
}

#mari-sigcode .status{
  position: absolute;
  left: 20px;
  top: 87.5px;
  padding: 7px 12px;
  background: var(--statusBg);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 9px;
  line-height: 9px;
  text-align: left;
  color: #333333;
}

#mari-sigcode .status c{
  color: var(--statusText);
  font-weight: 800;
  letter-spacing: 0.7px;
  margin-right: 4px;
}

#mari-sigcode .content-2{
  position: absolute;
  width: 165px;
  height: 150px;
  right: -20px;
  top: 0px;
  opacity: 0;
  transition: 0.2s;
}
#mari-sigcode:hover .content-2{
  opacity: 1;
  right: 0px;
  transition: 0.2s;
}

#mari-sigcode .box-bg{
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 125px;
  height: 60px;
  background: var(--textboxBg);
}

#mari-sigcode .links{
  position: absolute;
  height: 50px;
  width: 164px;
  top: 15px;
  right: 0px;
  background: transparent;
}

#mari-sigcode .sf{
  display: inline-block;
  color: var(--links);
  font-size: 15px;
  margin: 4.2px;
  transform: scale(1);
  transition: 0.12s;
}
#mari-sigcode .sf:hover{
  color: var(--linksHover);
  transform: scale(1.3);
  transition: 0.12s;
}

#mari-sigcode a{
  text-decoration: none;
}

#mari-sigcode .textbox{
  position: absolute;
  top: 12px;
  left: 15px;
  width: 90px;
  height: 36px;
  overflow: auto;
  padding-right: 9px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 8px;
  line-height: 12px;
  text-align: justify;
  letter-spacing: 0px;
  color: #333333;
}

#mari-sigcode ::-webkit-scrollbar {
  width: 2px;
}

#mari-sigcode ::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0.5px solid var(--scrollBorder);
}

#mari-sigcode ::-webkit-scrollbar-thumb {
  background: var(--scrollThumb);
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=Poppins:wght@400;800&display=swap" rel="stylesheet">

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<center>
<div id="mari-sigcode">

  <div class="right-bg"></div>
  <div class="left-overlay"></div>

  <div class="icon">
    <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="Hanie ©">
    <img src="https://i.imgur.com/c0DgPtf.gif"></a>
  </div>

  <div class="content-1">
    <div class="title">Don't Be So Dramatic</div>
    <div class="status"><c>OPEN</c> for request</div>
  </div>

  <div class="content-2">
    <div class="links">
      <a href="#" title="deviantart"><span class="sf sf-screen-o"></span></a>
      <a href="#" title="playground"><span class="sf sf-cursor-o"></span></a>
      <a href="#" title="tracker"><span class="sf sf-calendar-o"></span></a>
      <a href="#" title="hof"><span class="sf sf-trophy-o"></span></a>
      <a href="#" title="misc"><span class="sf sf-plus-2-o"></span></a>
    </div>

    <div class="box-bg">
      <div class="textbox">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in neque at tortor euismod iaculis ut sit amet libero.
      </div>
    </div>

</div>
</center>