refactoring media boxes so the large image is used as a background image,...

refactoring media boxes so the large image is used as a background image, rather than an image tag, therefore eliminating the image wobble on hover and the need for an extra img tag

opentech/public/funds/templates/public_funds/includes/project_listing.html

 {% load wagtailcore_tags wagtailimages_tags %}
 <a class="media-box" href="{% pageurl project %}">
-    <div class="media-box__images">
+    {% if project.icon %}
         {% image project.icon max-210x235 as project_icon %}
-        <img class="media-box__image media-box__image--large" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
-        <img class="media-box__image media-box__image--small" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
-    </div>
+        <div class="media-box__image-container" style="background-image:url('{{ project_icon.url }}')">
+            <img class="media-box__image media-box__image--small" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
+        </div>
+    {% else %}
+        <div class="media-box__image-container">
+            <div class="media-box__image media-box__image--small media-box__default-image media-box__default-image--small">
+                    <svg><use xlink:href="#logo-mobile-no-text"></use></svg>
+            </div>
+        </div>
+    {% endif %}
+
     <div class="media-box__content">
         <h4>{{ project.title }}</h4>
         {% if project.listing_summary or project.introduction %}

opentech/public/funds/templates/public_funds/lab_page.html

@@ -10,9 +10,8 @@
         <section class="section section--main section--top-bottom-space">
             <div class="media-box media-box--reverse media-box--bottom-space">
                 {% if page.icon %}
-                    <div class="media-box__images">
-                        {% image page.icon max-210x235 as page_icon %}
-                        <img class="media-box__image media-box__image--large" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
+                    {% image page.icon max-210x235 as page_icon %}
+                    <div class="media-box__image-container" style="background-image:url('{{ page_icon.url }}')">
                         <img class="media-box__image media-box__image--small" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
                     </div>
                 {% else %}

opentech/public/projects/templates/projects/project_page.html

@@ -5,9 +5,8 @@
 <div class="wrapper wrapper--small wrapper--top-inner-space">
     <div class="media-box media-box--reverse">
         {% if page.icon %}
-            <div class="media-box__images">
-                {% image page.icon max-210x235 as page_icon %}
-                <img class="media-box__image media-box__image--large" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
+            {% image page.icon max-210x235 as page_icon %}
+            <div class="media-box__image-container" style="background-image:url('{{ page_icon.url }}')">
                 <img class="media-box__image media-box__image--small" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
             </div>
         {% else %}

opentech/static_src/src/sass/components/_media-box.scss

@@ -24,8 +24,20 @@
         }
     }
 
-    &__images {
+    &__image-container {
         position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 170px;
+        background-repeat: no-repeat;
+        background-size: cover;
+
+        @include media-query(mob-landscape) {
+            width: 210px;
+            height: 210px;
+        }
 
         &::before {
             position: absolute;
@@ -53,12 +65,9 @@
         }
 
         &--small {
-            position: absolute;
-            top: 50%;
-            left: 50%;
+            z-index: 10;
             max-width: 105px;
             border: 0 solid;
-            transform: translate(-50%, -50%);
             box-sizing: content-box;
             transition: border $transition;
 
@@ -151,5 +160,25 @@
             height: 70px;
             fill: $color--white;
         }
+
+        &--small {
+            width: 105px;
+            height: 105px;
+            background-color: $color--white;
+            border: 0 solid;
+            box-sizing: content-box;
+            transition: border $transition;
+
+            #{$root}:hover & {
+                border: 10px solid $color--light-blue;
+                transition: border $transition;
+            }
+
+            > svg {
+                width: 50px;
+                height: 50px;
+                fill: $color--light-blue;
+            }
+        }
     }
 }