HTML:
<div class="news"> <img src="http://lorempixel.com/400/200/sports/1/" alt="У этой картинки есть альт"> <br> <img src="http://lorempixel.com/400/200/sports/2/" alt="И у этой тоже есть альт"> <br> <img src="http://lorempixel.com/400/200/sports/1/"> </div>
CSS:
.news img { display: block; margin-bottom: 4px; } .img-wrapper { display: inline-block; } .img-wrapper { background: #fafafa; border: solid 1px #ccc; padding: 5px; border-radius: 5px; margin-bottom: 10px; } .img-wrapper .img-descr { text-align: center; }
jQuery:
jQuery(document).ready(function($) { $('.news img').each(function() { var $this = $(this); if ($this.attr('alt')) { $this.replaceWith(function() { return '<div class="img-wrapper"><img src="'+$this.attr('src')+'"><div class="img-descr">'+$this.attr('alt')+'</div></div>'; }); }; }); });
Результат: