<JS>

jQuery(function() { if (typeof img_legend === 'undefined') { img_legend = true;

	console.log("Parse images legends...");

	jQuery("img:is(.media, .medialeft, .mediaright, .mediacenter)[title]").each(function() {

		var title = jQuery(this).attr("title");
		if (title == "") return true;

		console.log("Parse images legends...", title);

		$link = jQuery('<div class="img-legend">' + title + '</div>');

		jQuery(this).wrap('<div class="media img-legend-wrapper"></div>');
		jQuery(this).after($link);

		if (jQuery(this).hasClass("medialeft"))   { jQuery(this).removeClass("medialeft");   jQuery(this).parent().removeClass("media"); jQuery(this).parent().addClass("medialeft");   }
		if (jQuery(this).hasClass("mediaright"))  { jQuery(this).removeClass("mediaright");  jQuery(this).parent().removeClass("media"); jQuery(this).parent().addClass("mediaright");  }
		if (jQuery(this).hasClass("mediacenter")) { jQuery(this).removeClass("mediacenter"); jQuery(this).parent().removeClass("media"); jQuery(this).parent().addClass("mediacenter"); }
	});

	jQuery(".img-legend").on("click", function(event) { event.preventDefault(); });

}});

</JS><CSS>

.img-legend, 
.img-legend:hover, 
a:hover .img-legend { 
  
	text-decoration:	none;
	font-size:		0.9em;
	color:			var(--color-text, var(--color-body, #333));
}


</CSS>