JSFiddle - React, Tailwind, and code Playground

HTML

<section>
							<div>
								<p>Imagen original</p>
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal" >
								<p>Imagenes con clase para poder probar</p>
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal texto muy largo, mas que el ancho de la imagen" class="conleyenda">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal" class="conleyenda">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal<br>salto" class="conleyenda" width="100">
								
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 1" class="conleyenda" width="500">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 2" class="cambiaimagen" width="100">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 3" class="cambiaimagen">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 4" class="cambiaimagen">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 5" class="cambiaimagen" width="150">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 6" class="cambiaimagen">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 7<br>salto" class="cambiaimagen">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 8" class="cambiaimagen" width="200">
								<img src='https://upload.wikimedia.org/wikipedia/commons/1/19/Bachs_Familiy.jpg' alt="imagen principal 9" class="cambiaimagen">
								<img...

CSS

.antesimagen{
					position:relative;
					    display: inline-block;
				}
				
				.antesimagen span.textoleyendaimagen {
					color:#FFF;
					background: #505f5f;
					display:block;
					font-size:14px;
					height:26px;
					line-height:26px;
					white-space:nowrap;
         
				}
				
				.antesimagenreplace{
					position:relative;
					border:1px solid #cecece;
					display: inline-block;
				}
				.antesimagenreplace span.textoalternativoimagen {
					display:block;
					white-space:nowrap;
					overflow: hidden;
          text-align: center;
				}

JavaScript

$("img.conleyenda").each(function() {
				var imageCaption = $(this).attr("alt");
				if (imageCaption != '') {
					var imgWidth = $(this).width();
					var imgHeight = $(this).height();
					var position = $(this).position();
					var positionTop = imgHeight;
					$(this).wrap( "<div class='antesimagen' style='width:"+imgWidth+"px;height:"+(imgHeight+26)+"px;'></div>" );
					$("<span class='textoleyendaimagen'>"+imageCaption+"</span>").css({
						"position": "absolute",
						"top": positionTop + "px",
						"left": "0",
						"width": imgWidth + "px"
					}).insertAfter(this);
				}
			});
      $("img.cambiaimagen").each(function() {
				var imageCaption = $(this).attr("alt");
				if (imageCaption != '') {
					var imgWidth = $(this).width();
					var imgHeight = $(this).height();
					var position = $(this).position();
					var positionTop = imgHeight;
					$(this).wrap( "<div class='antesimagenreplace' style='width:"+imgWidth+"px;height:"+(imgHeight)+"px;'></div>" );
					$("<span class='textoalternativoimagen'>"+imageCaption+"</span>").css({
						"position": "relative",
						"width": imgWidth + "px",
						"height": imgHeight + "px",
						"line-height": imgHeight + "px"
					}).insertAfter(this);
					$(this).css({"display":"none"});
				}
			});