SHARE
TWEET

Untitled

lovelli May 24th, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [dohtml]<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  2. <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,800" rel="stylesheet">
  3. <style>
  4. .b-miniprofile {
  5.   height: 400px;
  6.   width: 200px;
  7.   position: relative;
  8.   margin: 20px auto;
  9.   outline: 1px solid #534F5D;
  10.   outline-offset: 10px;
  11.   overflow: hidden;
  12. }
  13.  
  14. .b-miniprofile img {
  15.   position:absolute;
  16.   height: 400px;
  17.   width: 200px;
  18.   object-fit: cover;
  19.   filter: grayscale(30%) contrast(90%);
  20.   -webkit-filter: grayscale(30%) contrast(90%);
  21.   transition: 0.5s;
  22.   -webkit-transition: 0.5s;
  23.   transition-delay: 1.2s;
  24.   -webkit-transition-delay: 1.2s;
  25. }
  26.  
  27. .b-miniprofile:hover img {
  28.   filter: grayscale(60%) contrast(40%);
  29.   -webkit-filter: grayscale(60%) contrast(40%);
  30.   transition-delay: 0s;
  31.   -webkit-transition-delay: 0s;
  32. }
  33.  
  34. .b-hov1 {
  35.   position: absolute;
  36.   height: 0px;
  37.   width: 200px;
  38.   background: rgba(83, 79, 93, 0.4);
  39.   transition: 0.5s;
  40.   -webkit-transition: 0.5s;
  41.   transition-delay: 1.2s;
  42.   -webkit-transition-delay: 1.2s;
  43. }
  44.  
  45. .b-miniprofile:hover .b-hov1 {
  46.   height: 400px;
  47.   transition-delay: 0s;
  48.   -webkit-transition-delay: 0s;
  49. }
  50.  
  51. .b-hov2 {
  52.   position: absolute;
  53.   height: 0px;
  54.   width: 200px;
  55.   background: rgba(83, 79, 93, 0.4);
  56.   transition: 0.5s;
  57.   -webkit-transition: 0.5s;
  58.   transition-delay: 0.9s;
  59.   -webkit-transition-delay: 0.9s;
  60.   bottom: 0px;
  61. }
  62.  
  63. .b-miniprofile:hover .b-hov2 {
  64.   height: 400px;
  65.   transition-delay: 0.3s;
  66.   -webkit-transition-delay: 0.3s;
  67. }
  68.  
  69. .b-hov3 {
  70.   position: absolute;
  71.   height: 400px;
  72.   width: 0px;
  73.   background: rgba(83, 79, 93, 0.4);
  74.    transition: 0.5s;
  75.   -webkit-transition: 0.5s;
  76.   transition-delay: 0.6s;
  77.   -webkit-transition-delay: 0.6s;
  78. }
  79.  
  80. .b-miniprofile:hover .b-hov3 {
  81.   width: 200px;
  82.   transition-delay: 0.6s;
  83.   -webkit-transition-delay: 0.6s;
  84. }
  85.  
  86. .b-hov4 {
  87.   position: absolute;
  88.   height: 400px;
  89.   width: 0px;
  90.   background: rgba(83, 79, 93, 0.4);
  91.  transition: 0.5s;
  92.   -webkit-transition: 0.5s;
  93.   transition-delay: 0.3s;
  94.   -webkit-transition-delay: 0.3s;
  95.   right: 0px;
  96. }
  97.  
  98. .b-miniprofile:hover .b-hov4 {
  99.   width: 200px;
  100.   transition-delay: 0.9s;
  101.   -webkit-transition-delay: 0.9s;
  102. }
  103.  
  104. .b-main {
  105.   position: absolute;
  106.   height: 330px;
  107.   width: 130px;
  108.   top: 25px;
  109.   left: 25px;
  110.   outline: 1px solid #33313a;
  111.   outline-offset: 10px;
  112.   border: 1px solid #33313a;
  113.   padding: 10px;
  114.   display: flex;
  115.   flex-wrap: wrap;
  116.   aling-items: center;
  117.   justify-content: space-around;
  118.   transition: 0.5s;
  119.   -webkit-transition: 0.5s;
  120.   transition-delay: 0s;
  121.   -webkit-transition-delay: 0s;
  122.   opacity: 0;
  123. }
  124.  
  125.  
  126. .b-miniprofile:hover .b-main {
  127.   opacity: 1;
  128.   transition-delay: 1.2s;
  129.   -webkit-transition-delay: 1.2s;
  130. }
  131.  
  132. .b-main span {
  133.   display: block;
  134.   font-family: montserrat;
  135.   font-size: 12px;
  136.     color: #ccc;
  137.     text-align: center;
  138.     margin: 5px 0px;
  139.     line-height: 140%;
  140. }
  141.  
  142. .b-main span b {
  143.   display: block;
  144.   text-transform: uppercase;
  145.    color: #eee;
  146.    border-bottom: 1px solid #ddd;
  147. }
  148.  
  149. .b-main icon {
  150.   display: block;
  151.   width: 70px;
  152.   height: 70px;
  153.   background-size: cover;
  154.   background-position: top center;
  155.   border-radius: 100%;
  156.   filter: grayscale(20%) contrast(80%);
  157.   -webkit-filter: grayscale(20%) contrast(80%);
  158. }
  159.  
  160. .b-main icon:before {
  161.   position: absolute;
  162.   height: 80px;
  163.   width: 80px;
  164.   border: 1px solid #33313a;
  165.   content:"";
  166.   display:block;
  167.   top: -5.5px;
  168.   left: -5.5px;
  169.   border-radius: 100%;
  170.   filter: grayscale(0%) contrast(120%);
  171.   -webkit-filter: grayscale(0%) contrast(120%);
  172. }
  173.  
  174. .butterfly {
  175.   position: absolute;
  176.   font-size: 120px;
  177.   color: #eee;
  178.   opacity: 0;
  179.   transform: rotate(30deg);
  180.   -webkit-transform: rotate(30deg);
  181.   bottom: 0px;
  182.   transition: 0.5s;
  183.   -webkit-transition: 0.5s;
  184.   transition-delay: 0s;
  185.   -webkit-transition-delay: 0s;
  186.   line-height: 100%;
  187.  
  188. }
  189.  
  190. .b-miniprofile:hover .butterfly {
  191.   opacity: 0.3;
  192.   transition-delay: 1.5s;
  193.   -webkit-transition-delay: 1.5s;
  194. }
  195.  
  196. </style>
  197. <div class="b-miniprofile">
  198.   <img src="https://66.media.tumblr.com/806e8577f1c60bf25855cf4e5b2f0e14/tumblr_przgbheKU51rg559so1_540.png">
  199.   <div class="b-hov1"></div>
  200.   <div class="b-hov2"></div>
  201.   <div class="b-hov3"></div>
  202.   <div class="b-hov4"></div>
  203.   <div class="butterfly"><span class="th th-butterfly-o"></span></div>
  204.   <div class="b-main"><span><b>FULL NAME</b> Rosemary Adelaide Lovell</span>
  205.     <span><b>Blood Purity</b> Half-Blood, Half-Veela</span>
  206.     <span><b>Sexuality</b> Bisexual</span>
  207.    <span><b>Slytherin</b> First Year</span>
  208.    <span><b>Played by</b> Margot Robbie</span>
  209.    <icon style="background-image: url(https://66.media.tumblr.com/48c2a290801a77f55e1e7b7b89f0ef4c/tumblr_prrkc4WtOC1ut23tvo4_540.gif)"></icon>
  210.   </div>
  211. </div>[/dohtml]
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top