Worth Its Weight in Gold

<center><link href="https://fonts.googleapis.com/css?family=Megrim|Roboto+Mono" rel="stylesheet">
<style>
 .wwhat {height: 255px; width: 383px; box-shadow: 1px 1px 2px 0px #CC9740; position: relative;}
 .wpic1 {height: 255px; width: 383px; position: absolute; background: rgba(0,0,0,.5);position: absolute;}
 .wtitle {padding: 10px; height: 20px; width: 344px; background: black; position: absolute; margin-top: 10px; margin-left: 10px; color: white; text-align: center; font-family: 'Megrim', cursive; font-size: 16px; font-weight: bold;}
 .wpic2 { height: 50px; width: 150px; border: 1px solid black; position: absolute; margin-left: 20px; margin-top: 63px;}
 .wcontent1 { padding: 10px; height: 155px; width: 155px; overflow: auto; background: rgba(255,255,255,.2); position: absolute; margin-top: 63px; margin-left: 187px; border: 1px solid black; text-align: justify; font-family: 'Roboto Mono', monospace; font-size: 9px; color: black;}
 .wcontent2 { padding: 5px; height: 103px; width: 140px; overflow: auto; background: rgba(255,255,255,.2); position: absolute; border: 1px solid black; margin-top: 124px; margin-left: 20px; text-align: justify; font-family: 'Roboto Mono', monospace; font-size: 9px; color: black;}
 .wtabby {float: left; color: #000;}
 .wtabby label {display: block; position: absolute; width: 50px; height: 50px; color: #D490B3; font-size: 25px; margin-top: 75px; margin-left: 171px; opacity: 1;}
 .wtabby [type=radio] {display: none;}
 .wtc {opacity: 0; transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s;}
 [type=radio]:checked ~ label {z-index: 2; opacity: 0;}
 [type=radio]:checked ~ label ~ .wtc {z-index: 5; opacity: 1;}
 .creditw {position: absolute; top: 255px; left: 195px; color: #cc9740; font-size: 6px; font-family: monospace;}
 .creditw a {text-decoration: none; color: #cc9740}
</style>
<div class="wwhat">
<div class="wtabby">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1" style="z-index:2; font-size: 12px; height: 50px; width: 50px; margin-top: 235px; margin-left: 348px; color: black;">▲</label>
 <div class="wtc">
   <div class="wpic1">
     <img src="https://placehold.it/255x383" style="height: 100%; width: 100%;">
   </div>
 </div>
<div class="wtabby">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2" style="z-index: 2;">▲</label>
 <div class="wtc" style="z-index: 5;">
 <div class="wpic1"></div>
   <div class="wpic1">
     <img src="https://placehold.it/255x383" style="height: 100%; width: 100%; opacity: .5;">
   </div>
   <div class="wtitle">Worth its weight in gold</div>
   <div class="wcontent1">All the info you could possibly want here. [b]This is what bold looks like.[/b] [i]This is italics. [b]Bold italics.[/i][/b] Cool, huh? It scrolls, too! Wheeeee!!!!All the info you could possibly want here. [b]This is what bold looks like.[/b] [i]This is italics. [b]Bold italics.[/i][/b] Cool, huh? It scrolls, too! Wheeeee!!!! All the info you could possibly want here. [b]This is what bold looks like.[/b] [i]This is italics. [b]Bold italics.[/i][/b] Cool, huh? It scrolls, too! Wheeeee!!!!</div>
   <div class="wpic2"><img src="https://placehold.it/50x150" style="height: 100%; width: 100%"></div>
   <div class="wcontent2">[LIST]
[*]thread here 
[*]thread here 
[*]thread here 
[*]thread here 
[*]thread here 
[*]thread here
[/LIST]</div>
 </div>
</div>
</div>
<div class="creditw"><a href="https://rpginitiative.com/profile/2592-penny/">▲</a></div>
</div>
</center>