[dohtml]<center>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Open+Sans+Condensed:300" rel="stylesheet">
<div class="acciaccature-frame">
<div class="acciaccature-image">
<div class="acciaccature-tribright"></div>
<div class="acciaccature-infostuff">first name lastname :NAME<br>
age here :AGE<br>
gender here :GENDER<br>
member group here :OCCUPATION<br>
sexuality here :SEXUALITY</div>
<div class="acciaccature-name">FIRSTNAME LASTNAME</div>
<div class="acciaccature-about"><div class="acciaccature-description">about</div>

about info here

</div>
<div class="acciaccature-friends"><div class="acciaccature-description">friends</div>

friends info here

</div>
<div class="acciaccature-enemies"><div class="acciaccature-description">enemies</div>

enemies info here

</div>
<div class="acciaccature-lovers"><div class="acciaccature-description">lovers</div>

lovers info here

</div>
</div>
<div class="acciaccature-credits">— ASHNIRAI <a href="http://shine.b1.jcink.com/index.php?showuser=19014">♥</a> <a href="http://sonderx.jcink.net/index.php?showuser=232">♥</a> <a href="http://cttw.jcink.net/index.php?showuser=14159">♥</a> —</div>
<style>
.acciaccature-frame {
   position: relative;
   border: 1.5px solid #98c5d9;
   width: 350px;
   height: 350px;
   background-color: rgba(255, 255, 255, 1);
   transition: all 2s ease 0.2s;
   -webkit-transition: all 2s ease 0.2s;
   -moz-transition: all 2s ease 0.2s;
   -ms-transition: all 2s ease 0.2s;
   -o-transition: all 2s ease 0.2s;
}
.acciaccature-frame:hover {
   position: relative;
   border: 5px solid #FFF;
   width: 350px;
   height: 520px;
   padding-bottom: 160px;
   background: #A4F2F5;
   background: -webkit-linear-gradient(#a4f5d0, #a4f5e4, #a4f2f5, #a4def5, #a4caf5);
   background: -o-linear-gradient(#a4f5d0, #a4f5e4, #a4f2f5, #a4def5, #a4caf5);
   background: -moz-linear-gradient(#a4f5d0, #a4f5e4, #a4f2f5, #a4def5, #a4caf5);
   background: linear-gradient(#a4f5d0, #a4f5e4, #a4f2f5, #a4def5, #a4caf5);
   transition: all 3s ease 0.6s;
   -webkit-transition: all 3s ease 0.6s;
   -moz-transition: all 3s ease 0.6s;
   -ms-transition: all 3s ease 0.6s;
   -o-transition: all 3s ease 0.6s;
}
.acciaccature-image {
   border: 3px solid #98c5d9;
   max-width: 100%; width: 100px;
   max-height: 100%; height: 100px;
   position: absolute;
   border-radius: 55px;
   margin-top: 100px;
   margin-left: 125px;
   background-image: url("https://via.placeholder.com/100x100");
   transition: all 2s ease 0.5s;
   -webkit-transition: all 2s ease 0.2s;
   -moz-transition: all 2s ease 0.2s;
   -ms-transition: all 2s ease 0.2s;
   -o-transition: all 2s ease 0.2s;
}
.acciaccature-frame:hover .acciaccature-image {
   border: 5px solid #FFF;
   position: absolute;
   margin: 25px 20px 0px 20px;
   width: 300px;
   height: 125px;
   background-image: url("https://via.placeholder.com/300x125");
   border-radius: 0px;
   transition: all 2s ease 0.6s;
   -webkit-transition: all 2s ease 0.6s;
   -moz-transition: all 2s ease 0.6s;
   -ms-transition: all 2s ease 0.6s;
   -o-transition: all 2s ease 0.6s;
}
.acciaccature-name {
   position: relative;
   width: 350px;
   left: -120px;
   text-align: center;
   text-transform: uppercase;
   font: 16px/16px "pt sans", sans-serif;
   color: #3a7f9e;
   opacity: 1;
   transition: opacity 1s ease 2s;
   -webkit-transition: opacity 1s ease 2s;
   -moz-transition: opacity 1s ease 2s;
   -ms-transition: opacity 1s ease 2s;
   -o-transition: opacity 1s ease 2s;
}
.acciaccature-frame:hover .acciaccature-name {
   opacity: 0;
   transition: opacity 0.5s ease;
   -webkit-transition: opacity 0.5s ease;
   -moz-transition: opacity 0.5s ease;
   -ms-transition: opacity 0.5s ease;
   -o-transition: opacity 0.5s ease;
}
.acciaccature-infostuff {
   position: absolute;
   right: 5px;
   bottom: 3px;
   text-align: right;
   font: 14px/1.3 "Amatic SC", "pt sans", sans-serif;
   color: #FFF;
   text-shadow: 1px 1px #000;
   vertical-align: center;
   opacity: 0;
   transition: opacity 1s ease 0.3s;
   -webkit-transition: opacity 1s ease 0.3s;
   -moz-transition: all 1s ease 0.3s;
   -ms-transition: all 1s ease 0.3s;
   -o-transition: all 1s ease 0.3s;
}
.acciaccature-frame:hover .acciaccature-infostuff {
   opacity: 1;
   transition: opacity 2.1s ease 1.2s;
   -webkit-transition: opacity 2.1s ease 1.2s;
   -moz-transition: opacity 2.1s ease 1.2s;
   -ms-transition: opacity 2.1s ease 1.2s;
   -o-transition: opacity 2.1s ease 1.2s;
}
.acciaccature-tribright {
   width: 0;
   height: 0;
   opacity: 0;
   margin-right: -175px;
   border-bottom: 125px solid rgba(152, 197, 217, 0.6);
   border-left: 125px solid transparent;
   transition: opacity 1s ease 0s;
  -webkit-transition: opacity 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
}
.acciaccature-frame:hover .acciaccature-tribright {
   opacity: 1;
   transition: opacity 2.1s ease 2s;
   -webkit-transition: opacity 2.1s ease 2s;
   -moz-transition: opacity 2.1s ease 2s;
   -ms-transition: opacity 2.1s ease 2s;
   -o-transition: opacity 2.1s ease 2s;
}
.acciaccature-about, .acciaccature-friends, .acciaccature-enemies, .acciaccature-lovers {
   position: absolute;
   overflow: scroll;
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
   top: 0px;
   margin-left: -110px;
   width: 290px;
   height: 80px;
   padding: 10px;
   border: 3px double #FFF;
   background-color: rgba(255, 255, 255, 0.5);
   font: 10px/1.5 "Open Sans Condensed", "pt sans", sans-serif;
   letter-spacing: 1.3;
   text-align: justify;
   opacity: 0;
   transition: all 1s ease 0.3s;  
   -webkit-transition: all 1s ease 0.3s;
   -moz-transition: all 1s ease 0.3s;
   -ms-transition: all 1s ease 0.3s;
   -o-transition: all 1s ease 0.3s;
}
.acciaccature-about::-webkit-scrollbar {display: none;}
.acciaccature-friends::-webkit-scrollbar {display: none;}
.acciaccature-enemies::-webkit-scrollbar {display: none;}
.acciaccature-lovers::-webkit-scrollbar {display: none;}
.acciaccature-frame:hover .acciaccature-about {
   position: absolute;
   top: 145px;
   margin-left: -7px;
   padding: 10px;
   opacity: 1;
   transition: all 1.5s ease 1.3s;
   -webkit-transition: all 1.5s ease 1.1s;
   -moz-transition: all 1.5s ease 1.1s;
   -ms-transition: all 1.5s ease 1.1s;
   -o-transition: all 1.5s ease 1.1s;
}
.acciaccature-frame:hover .acciaccature-friends {
   position: absolute;
   top: 265px;
   margin-left: -7px;
   padding: 10px;
   opacity: 1;
   transition: all 1.7s ease 1.5s;
   -webkit-transition: all 1.7s ease 1.3s;
   -moz-transition: all 1.7s ease 1.3s;
   -ms-transition: all 1.7s ease 1.3s;
   -o-transition: all 1.7s ease 1.3s;
}
.acciaccature-frame:hover .acciaccature-enemies {
   position: absolute;
   top: 385px;
   margin-left: -7px;
   padding: 10px;
   opacity: 1;
   transition: all 1.9s ease 1.7s;
   -webkit-transition: all 1.9s ease 1.5s;
   -moz-transition: all 1.9s ease 1.5s;
   -ms-transition: all 1.9s ease 1.5s;
   -o-transition: all 1.9s ease 1.5s;
}

.acciaccature-frame:hover .acciaccature-lovers {
   position: absolute;
   top: 505px;
   margin-left: -7px;
   padding: 10px;
   opacity: 1;
   transition: all 2.1s ease 1.9s;
   -webkit-transition: all 2.1s ease 1.7s;
   -moz-transition: all 2.1s ease 1.7s;
   -ms-transition: all 2.1s ease 1.7s;
   -o-transition: all 2.1s ease 1.7s;
}
.acciaccature-description {
   height: 20px;
   padding: 2px;
   text-align: center;
   font: 15px/1.3 "Amatic SC", "pt sans", sans-serif;
}
.acciaccature-credits {
   position: relative;
   margin-right: -15px;
   margin-top: 102%;
   font: 8px/1.3 arial;
   letter-spacing: 3px;
   color: #000;
   transition: all 2s ease 0.2s;
   -webkit-transition: all 2s ease 0.2s;
   -moz-transition: all 2s ease 0.2s;
   -ms-transition: all 2s ease 0.2s;
   -o-transition: all 2s ease 0.2s;
}
.acciaccature-frame:hover .acciaccature-credits {
   margin-top: 196%;
   transition: all 3s ease 0.6s;
   -webkit-transition: all 3s ease 0.6s;
   -moz-transition: all 3s ease 0.6s;
   -ms-transition: all 3s ease 0.6s;
   -o-transition: all 3s ease 0.6s;
}
.acciaccature-credits a:link, .acciaccature-credits a:visited {
   font: 8px/1.3 arial;
   letter-spacing: 3px;
   color: #000;
   cursor: crosshair;
}
</style>

</center>
[/dohtml]