display kind 20 alt text

src/components/Image/index.tsx

@@ -128,6 +128,7 @@ export default function Image({
         <img
           src={imageUrl}
           alt={finalAlt}
+          title={finalAlt || undefined}
           decoding="async"
           loading="lazy"
           draggable={false}

src/components/ImageGallery/index.tsx

@@ -7,7 +7,9 @@ import { TImetaInfo } from '@/types'
 import { ReactNode, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import Lightbox from 'yet-another-react-lightbox'
+import Captions from 'yet-another-react-lightbox/plugins/captions'
 import Zoom from 'yet-another-react-lightbox/plugins/zoom'
+import 'yet-another-react-lightbox/plugins/captions.css'
 import Image from '../Image'
 import ImageWithLightbox from '../ImageWithLightbox'
 
@@ -110,14 +112,15 @@ export default function ImageGallery({
             <Lightbox
               index={index}
               slides={(() => {
-                const slides = images.map(({ url, alt }) => ({ 
+                const slides = images.map(({ url, alt }) => ({
-                  src: url, 
+                  src: url,
-                  alt: alt || url 
+                  alt: alt || url,
+                  title: alt || undefined
                 }))
                 logger.debug('[ImageGallery] Lightbox slides:', { index, slidesCount: slides.length, slides })
                 return slides
               })()}
-              plugins={[Zoom]}
+              plugins={[Zoom, Captions]}
               open={index >= 0}
               close={() => setIndex(-1)}
               controller={{

src/components/ImageWithLightbox/index.tsx

@@ -7,7 +7,9 @@ import { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Lightbox from 'yet-another-react-lightbox'
+import Captions from 'yet-another-react-lightbox/plugins/captions'
 import Zoom from 'yet-another-react-lightbox/plugins/zoom'
+import 'yet-another-react-lightbox/plugins/captions.css'
 import Image from '../Image'
 
 export default function ImageWithLightbox({
@@ -73,11 +75,12 @@ export default function ImageWithLightbox({
           <div onClick={(e) => e.stopPropagation()}>
             <Lightbox
               index={index}
-              slides={[{ 
+              slides={[{
-                src: image.url, 
+                src: image.url,
-                alt: image.alt || image.url 
+                alt: image.alt || image.url,
+                title: image.alt || undefined
               }]}
-              plugins={[Zoom]}
+              plugins={[Zoom, Captions]}
               open={index >= 0}
               close={() => setIndex(-1)}
               controller={{