<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Fjalla+One|Roboto+Condensed:700italic,400' rel='stylesheet' type='text/css'><center>
<style>
#tess {height: 350px; width: 460px; border: 10px solid #fcfcfc; position: relative; overflow: hidden}
.tess1 {height: 350px; width: 230px; position: absolute; background-image: url(http://41.media.tumblr.com/1fcd5121595ced8dda1f0a2a3fbea9b7/tumblr_mn5qptiZn21qcepcpo1_500.jpg); background-size: cover; z-index: 2}

#tess .tess1 {left: 0px; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s;}

#tess:hover .tess1 {left: 230px; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s;}

.tess1a {width: 230px; font-family: 'Fjalla One'; bottom: 175px; color: #fff; text-transform: uppercase; font-size: 33px; text-align: center; position: absolute}

.tess1a a {font-family: 'Fjalla One'; color: #fff; text-transform: uppercase; font-size: 33px; text-align: center;}


#tess .tess1a {bottom: 175px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s;  -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}

#tess:hover .tess1a {bottom: 60px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}


.tess1b {width: 146px; border: 2px solid #fcfcfc; position: absolute; left: 40px; padding: 5px 0px 5px 0px; color: #fff; font-family: Roboto Condensed; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; background-image: url(http://i.imgur.com/3YfB87B.png)}
.tess1b::first-letter {color: #FFB7D8}

.tess2 {height: 350px; width: 230px; position: absolute; left: 230px; background-image:url(230 X 350 IMG HERE); }

#tess .tess1b {opacity: 0; -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s;}
#tess:hover .tess1b {opacity: 1; -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s; -webkit-transition-delay: 1.1s; }


.tess3 {height: 320px; width: 200px; padding: 8.5px; border: 8.5px solid transparent; background-image: url(http://i.imgur.com/qG4Q3og.png); position: absolute; font-family: 'roboto condensed'; color: #fff; text-align: justify; text-transform: uppercase; font-size: 10px; line-height: 95%; overflow: auto}

.tess3::-webkit-scrollbar {width: 1px}
.tess3::-webkit-scrollbar-thumb {background: #fff}


</style>
<div id="tess">
<div class="tess1">
<div class="tess1a"><a href="http://candylandcouture.b1.jcink.com/index.php?showuser=2515"><font style="color: #FFB7D8">t</font>essellate</a></div>
<div class="tess1b" style="top: 100px">tag: name/name</div>
<div class="tess1b" style="top: 135px">words: ###</div>
<div class="tess1b" style="top: 170px">note: </div>


</div>
<div class="tess3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consequat aliquam fermentum. Maecenas sollicitudin facilisis fermentum. Nulla eget accumsan urna. In sit amet egestas purus, laoreet rhoncus nunc. Donec eget lobortis eros. Sed orci orci, laoreet sed tincidunt et, tempus id urna. Proin id feugiat risus. Donec nec sollicitudin orci. Morbi vitae consequat nibh. Ut sit amet arcu imperdiet, molestie erat in, placerat dui. Curabitur faucibus elementum congue. Curabitur tristique pellentesque ligula eu mattis. Suspendisse aliquet erat mauris, et posuere enim ornare id. Cras malesuada sodales mollis.

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo neque. Integer lobortis, diam id volutpat bibendum, nibh ipsum pellentesque urna, ut feugiat urna eros a nisi. Phasellus hendrerit vitae diam id vulputate. Sed viverra eget felis in fermentum. Fusce vulputate, nibh non interdum scelerisque, leo augue tincidunt dolor, at dapibus est massa vel leo. Integer mattis purus nec lacus mattis, eget porttitor sapien maximus. Sed a mauris sit amet metus ultrices tincidunt. Duis semper tellus nec nisi lobortis, a tincidunt dui placerat.

<p>Ut tellus diam, blandit eu mauris in, hendrerit volutpat ligula. Vestibulum auctor arcu vel cursus varius. Aenean fringilla nisi sed ipsum scelerisque, ac interdum massa commodo. Morbi elementum congue quam, a luctus metus placerat eget. Pellentesque iaculis finibus velit vitae malesuada. Mauris et ultrices lorem, tempor convallis ante. Ut sagittis dui massa, ac congue tellus mollis id. Morbi aliquam ut ipsum non tempus. Aenean placerat nec tellus id mattis. Aliquam vitae ex ut ipsum ullamcorper dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas rhoncus orci odio, quis pretium quam pharetra sed. Nam nibh nulla, eleifend ut fringilla luctus, rhoncus eget nisi.

<p>Sed a volutpat velit. Praesent in massa lorem. Vivamus et pharetra mauris. Nulla convallis purus ac accumsan semper. Aliquam sed eros ornare, mattis dui et, vestibulum tortor. Vivamus ac pulvinar eros. Pellentesque tincidunt pulvinar consequat. In lacinia venenatis lacus. Suspendisse potenti. Etiam vel bibendum est. Proin sed semper turpis. Cras sit amet convallis quam, sit amet tincidunt arcu.

</div>

<div class="tess2"></div>

</div>
</center>