feat: working images background

Signed-off-by: QuentinN42 <quentin@lieumont.fr>

builder/files/main.css

@@ -2,33 +2,44 @@
     display: block;
     width: 150px;
     height: 150px;
-    padding: 10px;
+    overflow: hidden;
 }
 
 .item {
     display: relative;
     background-size: cover !important;
-    color: white;
+    color: black;
     text-decoration: none;
+    overflow: hidden;
+}
+
+.item:hover {
+    color: black;
+}
+
+.item img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
 }
 
 .item h2 {
-    text-align: center
+    text-align: center;
 }
 
 .item .desc {
-    background: black;
+    background: rgba(0,100,100,0.75);
     width: 100%;
     height: 100%;
-    opacity: 0;
-  transition-property: opacity;
-  transition-duration: 0.5s;
-  transition-timing-function: linear;
-  border-radius: 5px;
+    transition-property: transform;
+    transition-duration: 0.2s;
+    transition-timing-function: linear;
+    border-radius: 5px;
+    overflow: hidden;
 }
 
 .item:hover .desc {
-    opacity: 0.4;
+    transform: translate(0,-100%);
 }
 
 
@@ -41,3 +52,8 @@ h2 {
     display: flex;
     flex-wrap: wrap;
 }
+
+.flex-item {
+    padding: 10px;
+    margin: 0%;
+}

builder/templates/index.html

@@ -18,17 +18,14 @@
 
       <div class="flex-container">
         {% for item in category.content %}
-        <a
-          class="item"
-          href="{{ item.url }}"
-          style="background: url({{ item.image }});"
-        >
-          <div class="desc">
-            <h2>{{ item.name }}</h2>
-            <p>{{ item.description }}</p>
-          </div>
-          {# <img src="{{ item.image }}" alt="{{ item.name }}" /> #}
-        </a>
+        <div class="flex-item">
+          <a class="item" href="{{ item.url }}">
+            <img src="{{ item.image }}" alt="{{ item.name }}" />
+            <div class="desc">
+              <h2>{{ item.name }}</h2>
+            </div>
+          </a>
+        </div>
         {% endfor %}
       </div>
     </div>