Show additional infos about the part picture, when hovering it.

assets/css/app.css

@@ -837,4 +837,41 @@ div.dataTables_wrapper div.dataTables_info {
 .scanner-video {
     max-width: 500px;
     max-height: 250px;
+}
+
+/*******************************************
+ * Hovering carousel gallery
+ *******************************************/
+.carousel-caption-hover {
+    display: none;
+}
+
+.carousel .mask {
+    display: none;
+}
+
+.carousel:hover .mask {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition: .5s ease;
+    background-color: #0a0909;
+    opacity: 0.7;
+    border: 1px solid #dee2e6;
+    border-radius: .25rem;
+}
+
+.carousel-control {
+    display: none;
+}
+
+.carousel:hover .carousel-caption-hover {
+    display: block;
+}
+
+.carousel:hover .carousel-control {
+    display: flex;
 }

src/Twig/TypeLabelExtension.php

@@ -0,0 +1,27 @@
+<?php
+
+
+namespace App\Twig;
+
+
+use App\Services\ElementTypeNameGenerator;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+final class TypeLabelExtension extends AbstractExtension
+{
+    private $nameGenerator;
+
+    public function __construct(ElementTypeNameGenerator $elementTypeNameGenerator)
+    {
+        $this->nameGenerator = $elementTypeNameGenerator;
+    }
+
+    public function getFunctions()
+    {
+        return [
+                new TwigFunction('elementType', [$this->nameGenerator, 'getLocalizedTypeLabel']),
+                new TwigFunction('elementTypeName', [$this->nameGenerator, 'getTypeNameCombination']),
+            ];
+    }
+}

templates/Parts/info/_picture.html.twig

@@ -4,17 +4,28 @@
     <div id="pictureCarousel" class="carousel slide mb-2" data-interval="false">
         <div class="carousel-inner">
             {% for pic in pictures %}
+                {# @var pic App\Entity\Attachments\Attachment #}
                 <div class="carousel-item  {% if loop.first %}active{% endif %}">
-                    <img class="d-block w-100 img-fluid img-thumbnail bg-light" src="{{ pic | entityURL('file_view') }}" alt="">
+                    <a href="{{ pic | entityURL('file_view') }}" data-no-ajax target="_blank" rel="noopener">
+                        <img class="d-block w-100 img-fluid img-thumbnail bg-light" src="{{ pic | entityURL('file_view') }}" alt="">
+                        <div class="mask"></div>
+                        <div class="carousel-caption-hover">
+                            <div class="carousel-caption">
+                                <div><b>{{ pic.name }}</b></div>
+                                <div>{% if pic.filename %}({{ pic.filename }}) {% endif %}</div>
+                                <div>{{ elementTypeName(pic.element) }}</div>
+                            </div>
+                        </div>
+                    </a>
                 </div>
             {% endfor %}
         </div>
         {% if pictures | length > 1 %}
-            <a class="carousel-control-prev" href="#pictureCarousel" role="button" data-slide="prev">
+            <a class="carousel-control-prev carousel-control" href="#pictureCarousel" role="button" data-slide="prev">
                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                 <span class="sr-only">{% trans %}part.info.prev_picture{% endtrans %}</span>
             </a>
-            <a class="carousel-control-next" href="#pictureCarousel" role="button" data-slide="next">
+            <a class="carousel-control-next carousel-control" href="#pictureCarousel" role="button" data-slide="next">
                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
                 <span class="sr-only">{% trans %}part.info.next_picture{% endtrans %}</span>
             </a>