Как реализовать смену контента при наведении на картинку?
Обычный html+css<div>
 <img src="kartinka">
 <p>Text</p>
</div>p{
display: none;
}

img:hover + p{
display: block;
}
если только для подписей - вот самый простой концепт<div class="item"><!-- присваиваем класс .item, делаем position:relative; -->
 <img src="kartinka"><!-- растягиваем картинку под размер родительского элемента -->
 <p>Text</p><!-- position:absolute;top:0;left:0;right:0;bottom:0; - оформляем параграф как оверлей... opacity:0; -->
</div>
<!-- при наведении на .item:hover p{opacity:1} -->
<!-- по факту больше ничего не надо... все остальное - это украшательства -->