[html]<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

<style>
#war {height: 450px; width: 600px; background: #111; margin: auto; position: relative; --accent: #EB5147; overflow: hidden; border: 1px solid var(--accent);}
#war .bgbit {height: 100%; width: 100%; filter: grayscale(100%) brightness(20%); -webkit-filter: grayscale(100%) brightness(20%); -moz-filter: grayscale(100%) brightness(20%); background-size: cover; position: absolute}
#war .imgbit {width: 250px; height: 450px; left: 175px; background: none; position: absolute; border-left: 1px solid #333; border-right: 1px solid #333; box-sizing: border-box; top: 0;}
#war .imgbit img {height: 100%; width: 100%; object-fit: cover; filter: grayscale(100%) brightness(70%); position: absolute}
#war .namebit {height: 60%; width: 175px; background: none; position: absolute; left: 30px; top: 10%; display: flex; flex-direction: column; text-align: right; opacity: 1; transition: 0.9s ease; -webkit-transition: 0.9s ease; -moz-transition: 0.9s ease; z-index: 2}
#war .namebit span {font-family: oswald; text-transform: uppercase; font-weight: 600; font-size: 25px; line-height: 1; color: var(--accent); margin-bottom: 10px}
#war .namebit bit {font-family: oswald; text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: 1px; color:var(--accent); }
#war .connection {height: 60%; width: 175px; position: absolute; right: 30px; bottom: 10%; display: flex; flex-direction: column; background: none; justify-content: flex-end; transition: 0.9s ease;  -webkit-transition: 0.9s ease; -moz-transition: 0.9s ease; z-index: 2}
#war .connection span {font-family: oswald; text-transform: uppercase; font-weight: 600; font-size: 25px; line-height: 1; color: var(--accent); margin-top: 10px}
#war .connection bit {font-family: oswald; text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: 1px; color:var(--accent); }
#war:hover .namebit {left: 0px; opacity: 0}
#war:hover .connection {right: 0px; opacity: 0; }
#war input {display: none}
#war label {z-index: 10; display: block; font-family: ibm plex mono; color: #aaa; position: relative; left: 20px; text-align: right; width: 100px; height: 25px; line-height: 25px; font-size: 13px; top: 80px; opacity: 0; transition: 0.9s ease;  -webkit-transition: 0.9s ease; -moz-transition: 0.9s ease; cursor: crosshair}
#war label:after {height: 1px; width: 50px; background: var(--accent); display: block; content: ""; position: absolute; right: -55px; top: 12.5px;}
#war input:checked+label {color: var(--accent);}
#war .imgbit .bgmain {height: 100%; width: 100%; background: rgba(0,0,0,0.8);  position: absolute; box-sizing: border-box; overflow: hidden; opacity: 0; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
#war .imgbit .bgmain .cont1,
#war .imgbit .bgmain .cont2,
#war .imgbit .bgmain .cont3 {height: 100%; width: 100%; box-sizing: border-box; border: 35px solid transparent; color: #ccc; transition: 0.8s ease; -webkit-transition: 0.8s ease; -moz-transition: 0.8s ease;position: absolute; overflow: auto; font-family: ibm plex mono; font-size: 11px; flex-direction: column; display: flex; line-height: 1.6; border-right: 25px solid transparent; padding-right: 10px; opacity: 0; text-align: left}

#war #warlabel1:checked+label ~ .imgbit .bgmain .cont1 {left: 0; opacity: 1}
#war #warlabel2:checked+label ~ .imgbit .bgmain .cont1 {left: -100%}
#war #warlabel3:checked+label ~ .imgbit .bgmain .cont1 {left: -200%}

#war #warlabel1:checked+label ~ .imgbit .bgmain .cont2 {left: 100%}
#war #warlabel2:checked+label ~ .imgbit .bgmain .cont2 {left: 0%; opacity: 1}
#war #warlabel3:checked+label ~ .imgbit .bgmain .cont2 {left: -100%}

#war #warlabel1:checked+label ~ .imgbit .bgmain .cont3 {left: 200%}
#war #warlabel2:checked+label ~ .imgbit .bgmain .cont3 {left: 100%}
#war #warlabel3:checked+label ~ .imgbit .bgmain .cont3 {left: 0%; opacity: 1}

#war:hover .imgbit .bgmain {opacity: 1; transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s}
#war:hover label {opacity: 1; transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s}
#war .imgbit .bgmain a {font-family: oswald; color: var(--accent); text-decoration: none; font-size: 18px; text-transform: uppercase; font-weight: 600; margin-top: 10px; line-height: 1.3}
#war .imgbit .bgmain a:nth-child(1) {margin-top: 0}
#war .imgbit .bgmain he1 {font-family: ibm plex mono; color: var(--accent); text-transform: lowercase; font-size: 13px}
#war ::-webkit-scrollbar {width: 7px}
#war ::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.1); border: 1px solid var(--accent)}
#war ::-webkit-scrollbar-track {background: rgba(0,0,0,0.1); border: 1px solid var(--accent)}

#war .lyricbit {height: 50px; width: 250px; position: absolute; background: none; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); top: 100px; left: 340px; padding-left: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; color: var(--accent); font-family: ibm plex mono; text-transform: lowercase; font-weight:300; font-size: 12px; letter-spacing: 1px; line-height: 1.3; opacity: 0; transition: 0.6s ease; -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease; text-align: left}
#war:hover .lyricbit {left: 330px; opacity: 1; transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s}
</style>

<div id="war">
<div class="bgbit" style="background-image: url(https://i.pinimg.com/564x/ec/10/f7/ec10 … b21502.jpg)"></div>

<div class="namebit">
   <span>FIRST<br>LAST</span>
   <bit>INFO FIELD</bit>
   <bit>INFO FIELD</bit>
   <bit>INFO FIELD</bit>
   <bit>INFO FIELD</bit>
   <bit>INFO FIELD</bit>

</div>

<div class="connection">
<bit>SOME NAMES OF PEOPLE UR CHARACTER IS CLOSE TO</bit>
<bit>SOME NAMES OF PEOPLE UR CHARACTER IS CLOSE TO</bit>
<bit>SOME NAMES OF PEOPLE UR CHARACTER IS CLOSE TO</bit>
<bit>SOME NAMES OF PEOPLE UR CHARACTER IS CLOSE TO</bit>

   <span>connections</span>
</div>
<div class="lyricbit">you can be so cruel
And that's all I've ever known</div>
<input type="radio" id="warlabel1" name="warlabels"checked>
<label for="warlabel1">active</label>
   <input type="radio" id="warlabel2" name="warlabels">
<label for="warlabel2">complete</label>
<input type="radio" id="warlabel3" name="warlabels">
<label for="warlabel3">dead</label>

<div class="imgbit">
   <img src="LARGEIMGHEREWILLRESIZE">
   <div class="bgmain">
     <div class="cont1">
     <he1>active threads</he1>
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last

     </div>
           <div class="cont2">
     <he1>complete threads</he1>
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last

         
           </div>
     <div class="cont3">
       
       
       <he1>dead threads</he1>
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last
     <a href="">thread name</a> with first last

     </div>

   </div>
</div>

</div>

<a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 600px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">eve's codes</div></a>
[/html]