Leyenda en pictogramas aplicada en AngularJS y CSS

sails/src/assets/scripts/modules/student/views/collections.html

@@ -37,6 +37,7 @@
             popover-trigger="mouseenter"
             ng-init="colIndex = $index"
             ng-repeat="studentPicto in studentPictoRow track by $index">
+            <div class="picto-description"> {{ studentData.attributes.legend?studentPicto.expression.text:'' }} </div>
             <img
               src="/app/img/redcross.png"
               class="disabled"
@@ -108,6 +109,7 @@
             ng-repeat="studentPicto in studentPictoRow track by $index"
             popover="{{studentPicto.attributes.expression==null ? studentPicto.expression.text : studentPicto.attributes.expression}}"
             popover-trigger="mouseenter">
+            <div class="picto-description"> {{ studentData.attributes.legend?studentPicto.expression.text:'' }} </div>
             <img
               src="/app/img/redcross.png"
               class="disabled"
@@ -167,6 +169,7 @@
             popover-trigger="mouseenter"
             ng-init="colIndex = $index"
             ng-repeat="studentPicto in studentPictoRow track by $index">
+            <div class="picto-description"> {{ studentData.attributes.legend?studentPicto.expression.text:'' }} </div>
             <img
               src="/app/img/redcross.png"
               class="disabled"

sails/src/assets/styles/main.css

@@ -451,6 +451,21 @@ textarea.editable{
 
 .picto .picto_options .picto_minus{ position: absolute; top: 2px; right: 2px; }
 
+/* Text above picto */
+.picto-description {
+    position: absolute;
+    bottom: 0px;
+    text-align: center;
+    width: 100%;
+    background-color: rgba(1, 1, 1, 0.50);
+    color: white;
+    margin-left: -2px;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 12px;
+    word-wrap: break-word;
+}
+
 /* In addpicto */
 #collections{
 	height: 400px;