But Nobody Came.

<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
<style>
 .mainpic {height: 549px; width: 350px; border: 15px solid black; position: relative; background-image: url(https://placehold.it/549x350); background-size: 100%}
 .mainpic:hover .maintint {opacity: 1; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;}
 .maintint {height: 549px; width: 350px; background: rgba(168,139,104,.65); opacity: 0; transition: 1s ease-in-out; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;}
 .smallpics1 {opacity: 0; transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -webkit-transition: all 1s ease-in-out 1s; border: 7px solid white; position: absolute; height: 100px; width: 100px; top: 15px; left: 15px;}
 .smalldesc1 {overflow: auto; font-family: 'Share Tech Mono', monospace; font-size: 12px; text-align: justify; color: white; opacity: 0; transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -webkit-transition: all 1s ease-in-out 1s; border: 7px solid white; position: absolute;padding: 5px; height: 90px; width: 165px; top: 15px; left: 145px; background: black;}
 .smalldesc1 b {color: yellow;}
 .mainpic:hover .smallpics1 {opacity: 1; transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -webkit-transition: all 1s ease-in-out 1s;}
 .mainpic:hover .smalldesc1 {opacity: 1; transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -webkit-transition: all 1s ease-in-out 1s;}
 .smallpics2 {opacity: 0; transition: all 1s ease-in-out 2s; -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s; border: 7px solid white; position: absolute; height: 100px; width: 100px; top: 145px; left: 15px;}
 .smalldesc2 {overflow: auto; font-family: 'Share Tech Mono', monospace;  font-size: 12px; text-align: justify; color: white; opacity: 0; transition: all 1s ease-in-out 2s; -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s; border: 7px solid white; position: absolute; padding: 5px; height: 90px; width: 165px; top: 145px; left: 145px; background: black;}
 .smalldesc2 b {color: yellow;}
 .mainpic:hover .smallpics2 {opacity: 1; transition: all 1s ease-in-out 2s; -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s;}
 .mainpic:hover .smalldesc2 {opacity: 1; transition: all 1s ease-in-out 2s; -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s;}
 .smallpics3 {opacity: 0; transition: all 1s ease-in-out 3s; -moz-transition: all 1s ease-in-out 3s; -webkit-transition: all 1s ease-in-out 3s; border: 7px solid white; position: absolute; height: 100px; width: 100px; top: 275px; left: 15px;}
 .smalldesc3 {overflow: auto; font-family: 'Share Tech Mono', monospace; font-size: 12px; text-align: justify; color: white; opacity: 0; transition: all 1s ease-in-out 3s; -moz-transition: all 1s ease-in-out 3s; -webkit-transition: all 1s ease-in-out 3s; border: 7px solid white; position: absolute; padding: 5px; height: 90px; width: 165px; top: 275px; left: 145px; background: black;}
 .smalldesc3 b {color: yellow;}
 .mainpic:hover .smallpics3 {opacity: 1; transition: all 1s ease-in-out 3s; -moz-transition: all 1s ease-in-out 3s; -webkit-transition: all 1s ease-in-out 3s;}
 .mainpic:hover .smalldesc3 {opacity: 1; transition: all 1s ease-in-out 3s; -moz-transition: all 1s ease-in-out 3s; -webkit-transition: all 1s ease-in-out 3s;}
 .smallpics4 {opacity: 0; transition: all 1s ease-in-out 4s; -moz-transition: all 1s ease-in-out 4s; -webkit-transition: all 1s ease-in-out 4s; border: 7px solid white; position: absolute; height: 100px; width: 100px; top: 405px; left: 15px;}
 .smalldesc4 {overflow: auto; font-family: 'Share Tech Mono', monospace; font-size: 12px; text-align: justify; color: white; opacity: 0; transition: all 1s ease-in-out 4s; -moz-transition: all 1s ease-in-out 4s; -webkit-transition: all 1s ease-in-out 4s; border: 7px solid white; position: absolute; padding: 5px; height: 90px; width: 165px; top: 405px; left: 145px; background: black;}
 .smalldesc4 b {color: yellow;}
 .smalldesc4 h1 {margin-bottom: -10px; margin-top: 0px; line-height: 1;}
 .mainpic:hover .smallpics4 {opacity: 1; transition: all 1s ease-in-out 4s; -moz-transition: all 1s ease-in-out 4s; -webkit-transition: all 1s ease-in-out 4s;}
 .mainpic:hover .smalldesc4 {opacity: 1; transition: all 1s ease-in-out 4s; -moz-transition: all 1s ease-in-out 4s; -webkit-transition: all 1s ease-in-out 4s;}
 .wantcred a {font-family: 'space mono', monospace; text-decoration: none; color: silver; font-size: 8px;}
</style>
<center><div class="mainpic"><div class="maintint"></div>
 <div class="smallpics1"><img src="https://placehold.it/100" style="height: 100%;"></div>
 <div class="smalldesc1">info here! this will scroll! use <b></b> tags to make it bold and pop!</div>
 <div class="smallpics2"><img src="https://placehold.it/100" style="height: 100%;"></div>
 <div class="smalldesc2">info here! this will scroll! use <b></b> tags to make it bold and pop!</div>
 <div class="smallpics3"><img src="https://placehold.it/100" style="height: 100%;"></div>
 <div class="smalldesc3">info here! this will scroll! use <b></b> tags to make it bold and pop!</div>
 <div class="smallpics4"><img src="https://placehold.it/100" style="height: 100%;"></div>
 <div class="smalldesc4">info here! this will scroll! use <b></b> tags to make it bold and pop!</div>
<div class="wantcred"><center><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></center></div>
</div></center>