added anmiation to the hubs

Author: lukeinglis

_data/settings.yml

@@ -36,16 +36,19 @@ portfolio:
   portfolio__title: LLM Hubs
   portfolio__gallery:
     - image: /images/toolkit logos/Black and White Labs/lab-its.png
+      image_hover: /images/toolkit logos/Black and White Labs/lab-its-2.png
       title: its_hub
       link: https://github.com/Red-Hat-AI-Innovation-Team/its_hub
       description: Inference-time scaling for LLMs.
 
     - image: /images/toolkit logos/Black and White Labs/lab-sdg.png
+      image_hover: /images/toolkit logos/Black and White Labs/lab-sdg-2.png
       title: sdg_hub
       link: https://github.com/Red-Hat-AI-Innovation-Team/sdg_hub
       description: Synthetic data generation pipelines 
 
     - image: /images/toolkit logos/Black and White Labs/lab-training-hub.png
+      image_hover: /images/toolkit logos/Black and White Labs/lab-training-hub-2.png
       title: training_hub
       link: https://github.com/Red-Hat-AI-Innovation-Team/training_hub
       description: Post training algorithms for LLMs

_includes/section-portfolio.html

@@ -26,8 +26,13 @@ <h2 class="section__title">{{ site.data.settings.portfolio.portfolio__title }}</
         {% for photo in site.data.settings.portfolio.portfolio__gallery %}
         <div class="col col-3 col-d-6 col-t-12">
           <div class="portfolio__item">
-            <a href="{% if photo.link %}{{photo.link}}{% else %}{{photo.image}}{% endif %}" class="portfolio__link" {% if photo.video %}aria-label="Video"{% else %}data-glightbox='title: {{photo.title}}; description: {{photo.description}}; descPosition: bottom;'{% endif %}>
+            <a href="{% if photo.link %}{{photo.link}}{% else %}{{photo.image}}{% endif %}" class="portfolio__link {% if photo.image_hover %}portfolio__link--hover{% endif %}" {% if photo.video %}aria-label="Video"{% else %}data-glightbox='title: {{photo.title}}; description: {{photo.description}}; descPosition: bottom;'{% endif %}>
+              {% if photo.image_hover %}
+              <img src="{{photo.image}}" data-src="{{photo.image}}" class="portfolio__image portfolio__image--default lazy" alt="{{photo.title}}">
+              <img src="{{photo.image_hover}}" data-src="{{photo.image_hover}}" class="portfolio__image portfolio__image--hover lazy" alt="{{photo.title}} hover">
+              {% else %}
               <img src="{{photo.image}}" data-src="{{photo.image}}" class="portfolio__image lazy" alt="{{photo.title}}">
+              {% endif %}
             </a>
             <div class="portfolio__content">
               <h3 class="portfolio__title">

_sass/3-modules/_section-portfolio.scss

@@ -144,6 +144,21 @@
   object-fit: cover;
   border-radius: 16px;
   box-shadow: 0px 103px 80px rgba(27, 22, 50, 0.07), 0px 37.6px 29.2px rgba(27, 22, 50, 0.0483), 0px 18.25px 14.18px rgba(27, 22, 50, 0.0389), 0px 8.95px 6.95px rgba(27, 22, 50, 0.0311), 0px 3.54px 2.75px rgba(27, 22, 50, 0.0217);
+  transition: opacity 0.3s ease;
+}
+
+.portfolio__link--hover {
+  .portfolio__image--hover {
+    opacity: 0;
+  }
+
+  &:hover .portfolio__image--hover {
+    opacity: 1;
+  }
+
+  &:hover .portfolio__image--default {
+    opacity: 0;
+  }
 }
 
 // Specific styling for training_hub logo to prevent cropping