perfect illusion

<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Prompt:800" rel="stylesheet">

<center><div id="perfectillusion">

 

 <div class="tri1"></div>

 <div class="keep"><div class="pic" style="background: url(http://i.imgbox.com/hsPdqIsh.png);"></div></div>

 <div class="tri2"></div>

 

 <h1>perfect illusion</h1>

 

 <div class="littleinfo">

 <b>subtitle</b>

 <br>a few more 

 <br>lines of short

 <br>info can go in this space

 </div>

 

 <div class="text"><div class="scroll">

 

   <b>bold text.</b> body text.

   

 </div></div>

 

</div><a href="http://shine.jcink.net/index.php?showuser=8549"><span style="font: bold 8px/20px calibri; opacity: .5; text-align:center;">BY MITZI</span></a>

</center>

 

<style>

 

 /*** ACCENT COLOUR ***/

 #perfectillusion h1 { color: #HEXCODE; }

 #perfectillusion b { color: #HEXTCODE;}

 

@import 'https://fonts.googleapis.com/css?family=Inconsolata:400,700|Prompt:800';

 

 #perfectillusion {

   background: #fff; width: 350px; height: 450px; overflow: hidden;

   padding: 5px; border: solid 1px #DEDEDE; box-shadow: 0px 0px 4px #DEDEDE;

 }

 

 #perfectillusion .pic {

   width: 350px; height: 450px; transition: .9s;

 }

 

 #perfectillusion .keep {

   width: 350px; height: 450px; overflow: hidden;

 }

 

 #perfectillusion .tri1 {

   width: 0; height: 0;

   border-style: solid; border-width: 0 350px 130px 0;

   border-color: transparent #ffffff transparent transparent;

   margin-bottom: -130px; position: relative; z-index: 200;

   transition: .6s; transition-delay: .9s;

 }

 

 #perfectillusion .tri2 {

   width: 0; height: 0;

   border-style: solid;

   border-width: 130px 0 0 350px;

   border-color: transparent transparent transparent #ffffff;

   margin-top: -130px; position: relative; z-index: 200;

   transition: .6s; transition-delay: .9s;

 }

 

 #perfectillusion h1 {

   text-align: right!important; font: bold 45px/35px prompt;

   text-transform: uppercase;  letter-spacing: 8px;

   padding: 10px; height: 200px; overflow: hidden;

   margin-top: -450px; position: relative; z-index: 250;

   text-shadow: -1px 2px #fff;

   transition: .6s; transition-delay: 1.2s;

 }

 

 #perfectillusion .littleinfo {

   margin-top: 135px; position: relative; z-index: 200;

   color: #222; font: 16px/20px inconsolata; text-align: left;

   text-transform: uppercase; padding: 10px; letter-spacing: 2px;

   transition: .6s; transition-delay: 1.6s;

 }

 

 #perfectillusion .text {

   margin: -430px 20px 0 20px;

   border: solid 1px #fff;

   background: rgba(255,255,255,.5);

   position: relative; z-index: 2000;

   opacity: 0; transition: 1.3s;

 }

 

 #perfectillusion .scroll {

   color: #222; text-shadow: 0px 0px 1px #fff;

   font: 11px/16px inconsolata; margin: 25px; 

   text-align: justify; 

   height: 350px; overflow: auto;

 }

 

 #perfectillusion .scroll::-webkit-scrollbar {

   width: 15px!important; background: transparent!important;

   border: none!important;

 }

 

 #perfectillusion .scroll::-webkit-scrollbar-track {

   width: 15px!important; background: transparent!important;

   border: none!important;

 }

 

  #perfectillusion .scroll::-webkit-scrollbar-thumb {

   width: 15px!important; background: transparent!important;

   border-right: solid 2px #fff!important;

 }

 

 #perfectillusion:hover .pic {

   -webkit-filter: blur(100px);

   overflow: hidden; transition-delay: .7s;

 }

 

 #perfectillusion:hover .tri1 {

   margin-right: -700px; transition-delay: .7s;

 }

 

 #perfectillusion:hover .tri2{

   margin-left: -700px; transition-delay: .7s;

 }

 

 #perfectillusion:hover h1 {

   opacity: 0; transition-delay: 0s;

 }

 

 #perfectillusion:hover .littleinfo {

   opacity: 0; transition-delay: 0s;

 }

 

 #perfectillusion:hover .text {

   opacity: 1; transition-delay: .7s;

 }

 

</style>