Как правильно реализовать увеличение шрифта при наведении на фото?

Question

[RushV]

Здравствуйте!
Как бы я пытаюсь учить javascript и jquery решил сам написать такой код.
Задача такая при наведении на фото сместить название фотографии.
Я вот что то написал опыта мало.
Этот код работает при наведении на любые фотографии смещаются все заголовки:

var docimg = $(".list-group-item-doc img").hover(function(){ 
	    $(".list-group-item-doc h4").css("bottom","15px");
	    }, function(){ 
	    $(".list-group-item-doc h4").css("bottom","5px");
	  });

Как бы мне сделать что бы при наведении смещалась только на текущей фотографии на которой навели мышь?
Кажется куда-то надо прописать this но не знаю куда и как.
Заранее благодарю!

Answer 1

[Дима Долготер]

var docimg = $(".list-group-item-doc").find("img").hover(function(){ 
       $(this).parent().find("h4").css("bottom","15px");
      }, function(){ 
     $(this).parent().find("h4").css("bottom","5px");
    });

сам зеленый, так что не удивляйся если не подойдет)

Comments

[RushV]

Не работает(

[Дима Долготер]

$(".list-group-item-doc").find("img").hover(function(){ 
      $(this).find("h4").css("bottom","15px");
      });

два так. если нет. то давай на codepen и посмотрим

[RushV]

Вот Ссылка

[Дима Долготер]

RushV,
это если просто наводить на главный элемент. так пойдет?

$(document).ready(function(){
	$(".list-group-item-doc").hover(function(){ 
      $(this).find("h4").css("bottom","15px");
      },
      function(){ 
      $(this).find("h4").css("bottom","0px");
      });
});

тот же эфект на css

.list-group-item-doc:hover h4{
  bottom:15px
}

[RushV]

Что интересно даже так не работает(

$(document).ready(function(){
  $(".list-group-item-doc").hover(function(){ 
      $(this).find("h4").css("bottom","15px");
      },
      function(){ 
      $(this).find("h4").css("bottom","0px");
      });
});

.list-group-item-doc:hover h4{
  bottom:15px
}

так только на главный элемент вешать а мне надо на тег img

[Дима Долготер]

RushV,

$(".list-group-item-doc img").hover(function(){ 
      $(this).parent().find("h4").css("bottom","15px");
      });

[Дима Долготер]

RushV, щас я ответ перепишу

[Дима Долготер]

RushV, все. конечная версия в главном ответе

[Станислав Некрасов]

RushV,

img:hover + h4 {
    margin-top: 15px;
}

[RushV]

Большое вам спасибо!