the son and heir

[dohtml]<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">

</style>
<div id="all">
<ttl>FIRST<br>LAST</ttl>
   <img1 style="background-image: url(GIF HERE WILL RESIZE)"></img1>
 <scr></scr>
<quot>lyrics here, will stretch but don't go overboard
</quot>
<main>
 <h1>header</h1>
<inco><a href="link">words</a> - with first last</inco>
<inco><a href="link">words</a> - with first last</inco>
<updt><a href="link">words</a> - with first last</updt>
<h1>name</h1>
<updt><a href="link">words</a> - with first last</updt>


 <h1>header</h1>
<inco><a href="link">words</a> - with first last</inco>
<inco><a href="link">words</a> - with first last</inco>
<updt><a href="link">words</a> - with first last</updt>
<h1>name</h1>
<updt><a href="link">words</a> - with first last</updt>


 <h1>header</h1>
<inco><a href="link">words</a> - with first last</inco>
<inco><a href="link">words</a> - with first last</inco>
<updt><a href="link">words</a> - with first last</updt>

</main>
</div>
<a href="oliviacodes.tumblr.com"><div style="width: 450px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>


<style>
#all {height: 420px; width: 450px; background: #D5DADA; margin: auto; position: relative; overflow: hidden}
#all img1 {height: 420px; width: 305px; background-size: cover; background-position: center; -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100%);-ms-filter: grayscale(100%);  -o-filter: grayscale(100%); position: absolute; left: 0px}
#all scr {height: 420px; width: 305px; position: absolute; background: #B0B9B8; mix-blend-mode: screen; left: 0}
#all img1, #all scr {-webkit-transition: 0.6s ease 0.4s; -moz-transition: 0.6s ease 0.4s; -ms-transition: 0.6s ease 0.4s; -o-transition: 0.6s ease 0.4s}
#all input {display: none}
#all ttl {height: 110px; width: 308px; background: none; position: absolute; left: 0px; bottom: -40px; font-family: abril fatface; font-size: 50px; line-height: 34px; text-transform: uppercase; color: #474542; z-index: 10; opacity: 0.4; text-align: right; -webkit-transition: 0.6s ease 0.7s; -moz-transition: 0.6s ease  0.7s; -ms-transition: 0.6s ease  0.7s; -o-transition: 0.6s ease  0.7s}
#all quot {width: 200px; background: #f0f0f0; position: absolute; box-sizing: border-box; padding: 20px; text-align: center; font-family: lora; font-style: italic; font-weight: 400; font-size: 8px; letter-spacing: 3px; line-height: 16px; text-align: justify; text-align-last: center; left: 200px; top: 150px; -webkit-transition: 0.6s ease 0.7s; -moz-transition: 0.6s ease  0.7s; -ms-transition: 0.6s ease  0.7s; -o-transition: 0.6s ease  0.7s}
#all quot::before {height: 1px; width: 100px; background: #474542; content: ""; position: absolute; top: 5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);left: -30px; }
#all:hover ttl, #all:hover quot {-webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; }
#all:hover ttl {opacity: 0}
#all:hover quot {opacity: 0}
#all:hover img1, #all:hover scr {left: -150px; -webkit-transition-delay: 0.7s; -moz-transition-delay: 0.7s; -ms-transition-delay: 0.7s; -o-transition-delay: 0.7s;}
#all main {z-index: 11; background: none; height: 420px; width: 300px; position: absolute; right: 0; box-sizing: border-box; border: 25px solid transparent; border-right: 15px solid transparent; padding-right: 10px; font-family: noto serif; font-size: 9px; text-transform: lowercase; letter-spacing: 3px; line-height: 15px; opacity: 0;  -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease; -ms-transition: 0.6s ease; -o-transition: 0.6s ease; font-style: italic;overflow: auto; color: #B0B9B8}
#all h1 {font-family: abril fatface; font-size: 40px; margin: 20px 0px 20px 0px; letter-spacing: 0; color: #474542; opacity: 0.4; font-style: normal; text-transform: uppercase}
#all a { text-decoration: none; font-weight: 700; display: block}
#all:hover main {opacity: 1; -webkit-transition-delay: 1.1s;  -moz-transition-delay: 1.1s;  -ms-transition-delay: 1.1s;  -o-transition-delay: 1.1s;}
#all inco {color: #75807B}
#all updt {color: #B0B9B8}
#all inco > a {color: #75807B}
#all updt > a {color: #B0B9B8}
#all main::-webkit-scrollbar {width: 5px}
#all main::-webkit-scrollbar-thumb {background: #D5DADA; border: 1px solid #B0B9B8; }
#all main::-webkit-scrollbar-track {background: #D5DADA!important; border: none!important; }
[/dohtml]