Вывод описания (alt) под фото

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>';
			});
		};
	});
});

Результат:

найдено тут