9 files changed, 96 insertions, 14 deletions
diff --git a/content/overview-images/corro.svg b/content/overview-images/corro.svg
new file mode 100644
index 0000000..959dbf8
--- /dev/null
+++ b/content/overview-images/corro.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
diff --git a/content/overview-images/ferris-gesture.svg b/content/overview-images/ferris-gesture.svg
new file mode 100644
index 0000000..d819588
--- /dev/null
+++ b/content/overview-images/ferris-gesture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
diff --git a/content/overview-images/ferris-happy.svg b/content/overview-images/ferris-happy.svg
new file mode 100644
index 0000000..5e2f904
--- /dev/null
+++ b/content/overview-images/ferris-happy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="m505 250-6-13v-1c0-15-15-28-40-38v9l-7-3v-4c-36-13-89-21-147-21-52 0-99 6-133 16v14-17c-36 11-58 27-58 44l2 9-4 6s-3 4 2 12a1069 1069 0 0 0 48 60c1-1-3-15-13-30l-14-28c9 6 65 34 179 34 116-1 167-37 173-42-2 8-9 24-14 35-9 17-12 31-12 31l8-11c10-15 30-43 34-51s2-11 2-11"/><path fill="#f74c00" d="m540 250-40-30-1-4 13-18c1-2 2-5 1-7s-3-4-5-4l-22-4-3-5 9-21v-7c-1-2-4-3-6-3l-22 1-4-5 5-22c1-3 0-5-1-7l-7-2-21 6-5-4 1-23c0-3-1-5-3-6s-4-2-6-1l-20 10-5-3-4-23c0-2-2-4-4-5s-4-1-6 1l-18 13-6-1-8-22c0-2-2-4-4-4-3-1-5 0-6 2l-16 17-5-1-12-20c-1-2-3-3-6-3-2 0-4 1-5 3l-12 20-5 1-16-17a6 6 0 0 0-11 2l-7 22-6 1-18-13c-2-2-4-2-6-1s-4 3-4 5l-4 23-5 3-20-10c-2-1-5 0-6 1-2 1-3 3-3 6v23l-4 4-22-6-6 2c-1 2-2 4-1 7l5 22-4 5-22-1c-3 0-5 1-6 3v7l9 21-3 5-22 4c-2 0-4 2-5 4s0 5 1 7l13 18v1l-37 40s-6 4 2 14a1471 1471 0 0 0 79 80c1-1-4-18-20-39-13-18-29-47-25-50 0 0 4-6 13-10 0 0-1 0 0 0 0 0 185 85 356 2 20-4 31 7 31 7 4 2-6 31-15 51-12 22-13 39-12 40l11-17 49-71c6-11 0-14 0-14"/><path fill="#f74c00" d="M459 239s27-2 61-37l5-11s-54-54 30-91c0 0-7 12-5 58 0 0 26-8 33-50 0 0 37 49-40 95 0 0-36 58-88 53z"/><path d="M338 205s19-20 37 0c0 0 15 27 0 41 0 0-23 18-37 0 0 0-15-15 0-41"/><path fill="#fff" d="M360 213c0 7-5 14-10 14-6 0-11-7-11-14 0-8 5-15 11-15 5 0 10 7 10 15"/><path d="M256 200s32-14 40 17c0 0 9 36-26 38 0 0-44-8-14-55"/><path fill="#fff" d="M272 213c0 8-5 15-11 15s-10-7-10-15 4-15 10-15 11 7 11 15"/><path d="m297 268 40-3s-1 6-7 11c0 0-13 16-29-1 0 0-3-3-4-7"/><path fill="#f74c00" d="M135 231h-1c-13-3-50-13-60-28 0 0 50-57-28-93l9 63s-24-16-29-51c0 0-58 42 26 83 0 0 8 28 81 51a12 12 0 0 0 14-13c0-7-5-12-12-12"/></svg>
diff --git a/content/overview-images/ferris.svg b/content/overview-images/ferris.svg
new file mode 100644
index 0000000..1409b10
--- /dev/null
+++ b/content/overview-images/ferris.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
diff --git a/content/overview-images/image.jpg b/content/overview-images/image.jpg
deleted file mode 100644
index 7b9e98d..0000000
--- a/content/overview-images/image.jpg
+++ /dev/null
diff --git a/content/overview-images/img/ferris-gesture.svg b/content/overview-images/img/ferris-gesture.svg
new file mode 100644
index 0000000..d819588
--- /dev/null
+++ b/content/overview-images/img/ferris-gesture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
diff --git a/content/overview-images/img/ferris.svg b/content/overview-images/img/ferris.svg
new file mode 100644
index 0000000..1409b10
--- /dev/null
+++ b/content/overview-images/img/ferris.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
diff --git a/content/overview-images/index.md b/content/overview-images/index.md
index d253932..22e1f92 100644
--- a/content/overview-images/index.md
+++ b/content/overview-images/index.md
@@ -1,28 +1,104 @@
 +++
-title = "Image Examples"
-date = 2021-05-09
+title = "Image Shortcodes"
+date = 2021-05-19
 
 [taxonomies]
 categories = ["Features"]
-tags = ["images"]
+tags = ["shortcodes","images"]
+[extra]
+toc = true
 +++
 
-Images can be embed using direct or relative paths.
+This post covers the **imghover and img shortcodes**. Images can also be embeded directly using markdown `![Ferris](ferris.svg)`, but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score.
 <!-- more -->
-Use `img(path="./image.jpg", alt="Papaya")` to specify the relative path of image:
 
-{{ img(path="./image.jpg", alt="Papaya") }}
+# img Shortcode
 
-This is an example note with direct image, without using shortcode:
+- src is the path and filename of the image. (mandatory)
+- class sets a class for the image. (optional)
+- alt sets the alt note for the image. (recommended for google lighthouse)
+- w is the width of the image. (recommended for google lighthouse)
+- h is the height of the image. (recommended for google lighthouse)
 
-`![Rust](rust.png)`
+## Usage (same path)
+```rs
+{{/* img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) */}}
+```
+**Output**
+```html
+{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }}
+```
+{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }}
 
-![Rust](rust.png)
+## Usage (relative path ./)
+```rs
+{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) */}}
+```
+**Output**
+```html
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }}
+```
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }}
 
-This is an svg image:
+## Usage (root path /)
+```rs
+{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) */}}
+```
+**Output**
+```html
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }}
+```
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }}
 
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
+# SVG image directly in code:
+```html
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
+```
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
+
+
+# imghover Shortcode
+
+The first image in the src array is the one compared to all the others.
+
+When you hover your mouse over an image it will display the image to compare.
+
+This can be used to compare only one image with another by passing only two src in the array.
+
+- src is an array of paths and filenames for the images. (mandatory)
+- w is the width of the image.
+- h is the height of the image.
+- p is the percent size that you want the image to use on the page. (50 is the default)
+
+*w and h are used only to calculate the aspect ratio, overall size is set by p*
+
+## Usage (same path)
+```rs
+{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}}
+```
+**Output**
+```html
+{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}
+
+## Usage (relative path ./)
+```rs
+{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}}
+```
+**Output**
+```html
+{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}
+
+## Usage (root path /)
+```rs
+{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}}
+```
+**Output**
+```html
+{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}
 
-<style>
-.canon { background: white; width: 50%; height: auto; }
-</style>
diff --git a/content/overview-images/rust.png b/content/overview-images/rust.png
deleted file mode 100644
index 38cbc4f..0000000
--- a/content/overview-images/rust.png
+++ /dev/null