Widget:CharacterList

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> <style>

1. chars a img.thumbborder {

 border: none;

}

1. chars a:hover img.thumbborder {

   -webkit-filter: grayscale(50%) brightness(50%);
   filter: grayscale(70%) brightness(50%) blur(2px);

-webkit-transition : -webkit-filter 250ms linear; transition: filter 250ms linear;

}

1. chars a:hover .tcont{

   opacity: 1;

transition: opacity 250ms linear;

}

1. chars a:hover

{

   text-decoration: none;

} div#chars .tcont{ position: relative; opacity: 0; color:white; font-family: Cinzel Decorative; font-weight: bold; font-size: 14px; display: inline-block; width: 144px; top: -90px; left: 6px; text-align: center;

}

1. chars a {

display: inline-grid; max-width: 150px; max-height: 150px; margin-right: 20px; margin-left:30px; margin-bottom: 30px;

} div#filter{ border: 3px solid #dddddd; border-radius: 200px; overflow: hidden; display: block; }

div#chars { text-align: center; } div#chars #breaker { text-align: left; text-size: 18px; text-weight: bold; }

1. breaker {

display: block; text-align:left; font-size: 20px; font-weight: bold; padding: 5px; }

1. charSelect {

border: 1px solid #000;

   font-size: 14px;
   color: #fff;
   background: #444;
   padding: 2px;
 position: relative;
 width: 220px;

}

1. charTitle{

display: inline-block; text-align:center; font-size: 24px; font-weight: bold; width: 58%; } </style>

<script>

$("#chars .thumbborder").wrap("

");

$("div#filter").each(function(){ $(this).after("" + $(this).parent().attr("title") +"")});

$("#chars img").each(function() { var text = $(this).attr("class"); text = text.substring(0, text.indexOf(" ")); $(this).parent().parent().attr("class", text); });

$("span.tcont").each(function() { if($(this).height() > 44 && $(this).height() < 67){ $(this).parent().css("position", "relative"); $(this).css("top", "-100px"); } if($(this).height() > 67){ $(this).parent().css("position", "relative"); $(this).css("top", "-110px"); } });

var classList = []; $("div#chars a").each(function() { var text = $(this).attr("class"); text = text.substring(0, text.indexOf("-")); if(classList.indexOf(text) < 0){ classList.push(text); } });

var charList = []; $("span.tcont").each(function() { if(charList.indexOf($(this).text()) < 0){ charList.push($(this).text()); } });

var s1List = []; $("div#chars a").each(function() { if($(this).attr("class").startsWith("s1")){ if(s1List.indexOf($(this).find("span.tcont").text()) < 0){ s1List.push($(this).find("span.tcont").text()); } } });

var s2List = []; $("div#chars a").each(function() { if($(this).attr("class").startsWith("s2")){ if(s2List.indexOf($(this).find("span.tcont").text()) < 0){ s2List.push($(this).find("span.tcont").text()); } } });

$("div#chars").before("<select id='charSelect'> <option>Season 1 Characters</option> <option>Season 2 Characters</option> <option>All Characters</option> <option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</option> <option>The Many Gobos of Pat</option> <option>The Sunswords</option> <option>The Unseen Rogues</option> <option>Kobold Headhunters</option> <option>Zarlin Catacombs</option> <option>The New Crew</option> <option>Silvermine Mountains</option> <option>Woodcarvers</option> <option>Okagnoma Guild Hall</option> <option>Murder Bros</option> <option>The Cobblers</option> <option>The Tower of Ultimate Wizardry: Chapter One</option> <option>Unexpected Discovery</option> <option>Buckeroos</option> <option>Fall of Dundinborough</option> <option>Den of Devils</option> <option>The Skeleton King</option> </select>");

</script>