[dohtml]<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,800" rel="stylesheet">
<style>
.b-miniprofile {
  height: 400px;
  width: 200px;
  position: relative;
  margin: 20px auto;
  outline: 1px solid #534F5D;
  outline-offset: 10px;
  overflow: hidden;
}

.b-miniprofile img {
  position:absolute;
  height: 400px;
  width: 200px;
  object-fit: cover;
  filter: grayscale(30%) contrast(90%);
  -webkit-filter: grayscale(30%) contrast(90%);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  transition-delay: 1.2s;
  -webkit-transition-delay: 1.2s;
}

.b-miniprofile:hover img {
  filter: grayscale(60%) contrast(40%);
  -webkit-filter: grayscale(60%) contrast(40%);
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.b-hov1 {
  position: absolute;
  height: 0px;
  width: 200px;
  background: rgba(83, 79, 93, 0.4);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  transition-delay: 1.2s;
  -webkit-transition-delay: 1.2s;
}

.b-miniprofile:hover .b-hov1 {
  height: 400px;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.b-hov2 {
  position: absolute;
  height: 0px;
  width: 200px;
  background: rgba(83, 79, 93, 0.4);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  transition-delay: 0.9s;
  -webkit-transition-delay: 0.9s;
  bottom: 0px;
}

.b-miniprofile:hover .b-hov2 {
  height: 400px;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}

.b-hov3 {
  position: absolute;
  height: 400px;
  width: 0px;
  background: rgba(83, 79, 93, 0.4);
   transition: 0.5s;
  -webkit-transition: 0.5s;
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}

.b-miniprofile:hover .b-hov3 {
  width: 200px;
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}

.b-hov4 {
  position: absolute;
  height: 400px;
  width: 0px;
  background: rgba(83, 79, 93, 0.4);
 transition: 0.5s;
  -webkit-transition: 0.5s;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  right: 0px;
}

.b-miniprofile:hover .b-hov4 {
  width: 200px;
  transition-delay: 0.9s;
  -webkit-transition-delay: 0.9s;
}

.b-main {
  position: absolute;
  height: 330px;
  width: 130px;
  top: 25px;
  left: 25px;
  outline: 1px solid #33313a;
  outline-offset: 10px;
  border: 1px solid #33313a;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  aling-items: center;
  justify-content: space-around;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  opacity: 0;
}


.b-miniprofile:hover .b-main {
  opacity: 1;
  transition-delay: 1.2s;
  -webkit-transition-delay: 1.2s;
}

.b-main span {
  display: block;
  font-family: montserrat;
  font-size: 12px;
    color: #ccc;
    text-align: center;
    margin: 5px 0px;
    line-height: 140%;
}

.b-main span b {
  display: block;
  text-transform: uppercase;
   color: #eee;
   border-bottom: 1px solid #ddd;
}

.b-main icon {
  display: block;
  width: 70px;
  height: 70px;
  background-size: cover;
  background-position: top center;
  border-radius: 100%;
  filter: grayscale(20%) contrast(80%);
  -webkit-filter: grayscale(20%) contrast(80%);
}

.b-main icon:before {
  position: absolute;
  height: 80px;
  width: 80px;
  border: 1px solid #33313a;
  content:"";
  display:block;
  top: -5.5px;
  left: -5.5px;
  border-radius: 100%;
  filter: grayscale(0%) contrast(120%);
  -webkit-filter: grayscale(0%) contrast(120%);
}

.butterfly {
  position: absolute;
  font-size: 120px;
  color: #eee;
  opacity: 0;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  bottom: 0px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  line-height: 100%;

}

.b-miniprofile:hover .butterfly {
  opacity: 0.3;
  transition-delay: 1.5s;
  -webkit-transition-delay: 1.5s;
}

</style>
<div class="b-miniprofile">
  <img src="https://66.media.tumblr.com/806e8577f1c60bf25855cf4e5b2f0e14/tumblr_przgbheKU51rg559so1_540.png">
  <div class="b-hov1"></div>
  <div class="b-hov2"></div>
  <div class="b-hov3"></div>
  <div class="b-hov4"></div>
  <div class="butterfly"><span class="th th-butterfly-o"></span></div>
  <div class="b-main"><span><b>FULL NAME</b> Rosemary Adelaide Lovell</span>
    <span><b>Blood Purity</b> Half-Blood, Half-Veela</span>
    <span><b>Sexuality</b> Bisexual</span>
   <span><b>Slytherin</b> First Year</span>
   <span><b>Played by</b> Margot Robbie</span>
   <icon style="background-image: url(https://66.media.tumblr.com/48c2a290801a77f55e1e7b7b89f0ef4c/tumblr_prrkc4WtOC1ut23tvo4_540.gif)"></icon>
  </div>
</div>[/dohtml]