better sponsor image grid

Author: gregsdennis

.jekyll-metadata

@@ -10,6 +10,10 @@ Greg accepts financial support via GitHub Sponsors which encourages him to work
 
 The following kind individuals and organizations currently support Greg:
 
-[![@xqrzd](https://github.com/xqrzd.png){: w="50" h="50" }](https://github.com/xqrzd)
-[![@michaelstaib](https://github.com/michaelstaib.png){: w="50" h="50" }](https://github.com/michaelstaib)
-[![@ChilliCream](https://github.com/ChilliCream.png){: w="50" h="50" }](https://github.com/ChilliCream)
+<div class="sponsors" markdown=1>
+
+[![@xqrzd](https://github.com/xqrzd.png)](https://github.com/xqrzd)
+[![@michaelstaib](https://github.com/michaelstaib.png)](https://github.com/michaelstaib)
+[![@ChilliCream](https://github.com/ChilliCream.png)](https://github.com/ChilliCream)
+
+</div>

_tabs/support.md

@@ -63,3 +63,26 @@ code.highlighter-rouge {
 table {
   width: -webkit-fill-available;
 }
+
+.sponsors>p>a {
+  /*Tooltip will be positioned relative to this*/
+  position: relative;
+}
+
+/*Tooltip magic*/
+.sponsors img:hover:after {
+  display: block;
+  content: attr(alt);
+  position: absolute;
+  bottom: 5px;
+  background-color: rgba(200, 200, 200, 0.8);
+  border-radius:2px;
+  padding:2px;
+}
+
+.sponsors img {
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  margin: 2px;
+}