Affichage au survol du légume

src/PotageBundle/Resources/views/Membre/today.html.twig

@@ -35,7 +35,17 @@
                          data-legume-id="{{ legume.id }}"
                          style="background-image: url('{{ asset('uploads/images/legumes/') }}{{ legume.image }}');">
 
-                        {{ legume.nom }}
+                        <div class="overlay">
+                            <div class="texte">
+                                <h5>{{ legume.nom }}</h5>
+                                <p>{{ legume.description }}</p>
+                            </div>
+                            <div class="prixPoids">
+                                <span class="prix">{{ legume.prixUnitaire }}</span>
+                                <span class="devise">€</span>
+                                <span class="unite">/{{ legume.unite }}</span>
+                            </div>
+                        </div>
 
                     </div>
                 {% endfor %}

src/PotageBundle/Resources/views/Membre/today.js

@@ -6,7 +6,9 @@
 $("#offre div.item")
     .on("mouseenter", function() {
         $(this).transition({ scale: 1.25 }, 200, 'linear');
+        $(this).find('.overlay').transition({ opacity: 0.9 }, 200, 'linear');
     })
     .on("mouseleave", function() {
         $(this).transition({ scale: 1 }, 200, 'linear');
+        $(this).find('.overlay').transition({ opacity: 0 }, 200, 'linear');
     });

web/css/style.css

@@ -362,7 +362,9 @@ body#homepage footer#footer .footer {
     background-color: white;
 }
 
-/**/
+/*
+*   La page today
+*/
 body#today_one {
 
 }
@@ -371,7 +373,7 @@ body#today_one #offre.grid {
     flex-flow: row wrap;
     margin: 2em -2em;
 }
-body#today_one #offre.grid div.item.image.legume {
+#today_one #offre.grid div.item {
     flex: 1 0 10%;
     position: relative;
     min-width: 175px;
@@ -380,9 +382,38 @@ body#today_one #offre.grid div.item.image.legume {
     background-size: cover;
     background-color: #242424;
 }
-body#today_one #offre.grid div.item.image.legume:hover {
+#today_one #offre.grid div.item:hover {
     z-index: 1;
     box-shadow: 0 0 30px 0 black;
 }
 
+#today_one #offre.grid div.item .overlay {
+    position: absolute;
+    top: 0; bottom: 0; left: 0; right: 0;
+    padding: 1em;
+    background-color: #000000aa;
+    color: white;
+    opacity: 0;
+}
+
+.overlay div.prixPoids {
+    position: absolute;
+    padding: 1em;
+    bottom: 0;
+    right: 0;
+}
+.overlay div.prixPoids {
+    font-size: 14px;
+}
+.overlay div.texte h5 {
+    font-size: 18px;
+}
+.overlay div.prixPoids span.prix {
+    font-size: 22px;
+}
+.overlay div.texte p {
+    font-size: 10px;
+}
+
+