как запустить функцию jquery только для одного элемента, используя имя класса. есть больше элементов, использующих тот же класс

У меня есть следующий код на моей странице галереи, чтобы показать галереи, которые у меня есть.

<div id="gallery">
    <?php
    if (!empty($gallery)) {
        foreach ($gallery as $row) {
            ?>
            <div class="album_holders">
                <div class="image_holder">
                    <img src="images/gallery/<?php echo $row['img_name']; ?>" width="150" height="75"/>
                </div>
                <div class="title_holder">
                    <?php echo $row['title']; ?>
                </div>
            </div>
        </div>
        <?php
    }
}
?>
</div>

поэтому мне нужно добавить мышь к анимации всем владельцам альбомов. когда мышь придет над альбомом, мне нужно показать название альбома под ним, используя функцию jquery.

это мой код jquery

$(".image_holder").on("mouseover", function ()
{
   $(".title_holder").animate({
       "opacity": 1
   },1500,$easing2); 
});

но проблема в том, что когда я перемещаю мышь над одним альбомом, каждый альбом показывает его имя. как это остановить. Я ищу в сети и обнаружил, что должен использовать функцию.on. либо я все еще использую его, показывая его имя.