Подходящие изображения и решение для надписей

Question

Я создаю отдельную прокрутку из 39 изображений, каждое из которых содержится в элементе div следующим образом:

<div id="project-container-04" class="smallcontainer">
<div class="image-container">
<img src="004.jpg" id="project-4">
</div>
</div>

Я надеюсь связать каждое изображение с заголовком, содержащимся в другом месте, так что, когда пользователь наводит курсор на определенный #image-container-x, появляется соответствующий заголовок:

<div class="project-description ex2">
<i>Imagine (fall)</i>, 2016<br>
pvc, glass, inkjet print on adhesive vinyl, aluminum frame<br>
96 x 72 in. 
</div>

До сих пор мое решение состояло в том, чтобы маркировать каждую подпись численно, чтобы соответствовать номеру изображения, назначая класс "ex2" "ex3" "ex4" каждой подписи, а затем используя jquery для ее активации:

$("#project-container-02").on({
        mouseleave: function (){
            $(".ex2").css("visibility", "hidden");
        }
});

Так как число в идентификаторе проекта всегда будет совпадать с числом в классе заголовка, мне интересно, есть ли способ автоматизировать его, используя массив вместо копирования, вставляя вышеуказанные строки кода для каждого изображения и заголовка?