Improve style of image on plant info page

sass/plant.scss

@@ -1,2 +1,35 @@
 @import "_common.scss";
 
+.plant-image {
+  width: 100%;
+  display: flex;
+  margin: auto;
+  border-radius: .5em;
+  color: $highlight-text;
+  box-shadow: 0.5em 0.5em $highlight;
+  position: relative;
+
+  a {
+    color: $highlight-text;
+  }
+
+  .image-source {
+    position: absolute;
+    padding: 0.25em;
+    border-radius: 0.25em;
+    margin: 0.25em;
+    bottom: 0;
+    right: 0;
+    font-size: 0.8em;
+    background-color: transparentize($highlight, 0.75); 
+  }
+
+  img {
+    border-radius: .5em;
+    width: 100%;
+  }
+
+  &:hover .image-source {
+    background-color: $highlight;      
+  }
+}

templates/plant.html

@@ -17,7 +17,15 @@
 
   {% block image %}
     {% set image = resize_image(path=data.image.url, width=1024, height=512) %}
-    {{ macros::figure(url=image.url, alt=data.image.alt, source=data.image.source) }}
+    <figure class="plant-image">
+      <img src="{{ image.url }}" alt="{{ data.image.alt }}" title="{{ data.bin_name }}">
+
+      {% if data.image.source != "" %}
+        <a class="image-source" href="{{ data.image.source }}" aria-label="Image Source">
+          Source
+        </a>
+      {% endif %}
+    </figure>
   {% endblock image %}
   <section>
     <a href="#site"><h3 id="site">Site</h3></a>