michael2
9/11/2017 - 12:34 AM

Add img alt tag text over image in .textSection of websites

Add img alt tag text over image in .textSection of websites

<script>

$(function(){
$(".textSection img").each(function(){
   var caption ="";
   $(this).wrap("<div class='img-caption'/>") 
   if($(this).attr("alt")){
     caption = $(this).attr("alt");
   
   var style = $(this).attr("style");
   $(this).attr("style","");
   $("<div class='caption'>" + caption +"</div>").insertAfter(this); 
   $(this).parent().attr("style", style);
   }
});

});

</script>
.img-caption {
    position:relative;
}

.img-caption .caption {
    position:absolute;
    bottom:20px;
    left:20px;
    width:60%;
    padding:5px;
    font-size: 2.2em;
    z-index:2;
  -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
  line-height: 1.2em;
  color:#fff;

}

.img-caption img {
    position:relative;
    z-index:1;
    vertical-align: top;
}