jQuery mouseover въпрос

Здравейте,
Имам един "грид" от картинки и искам при минаване с мишката върху някоя от картинките да излиза див в/у картинката с информация.

Това което съм направил до момента ме удовлетворява, но поради не понятна за мен причина се изпълнява за всички елементи със съответния клас.

html

<img class="img" src="" />
<div class="info">info</div>

js

$(document).ready(function(){
$(".img").mouseover(function(){
$(".info").slideDown("slow");
});
$(".img").mouseout(function(){
$(".info").slideUp("slow");
});
});

Как според вас ще стане така, че да се изпълни за всяка картинка по отделно, а не едновременно за всички?

Става така понеже използваш директно
[js]$(".info").[/js]
Което избира всички елементи с този клас, ето едно бързо решение като използваш
[js].next()[/js]

http://codepen.io/dgeorgiev/pen/qfvlz :lol:

Защо не пробваш това?
Click

просто слагай някакво уникално id на всяка картинка и на инфото за нея и по него ги викай

вместо mouseover може да ползваш .hover()

Благодаря за помощта!
Към момента ще си използвам jQuery. Държа на ефекта който се получава.

CSS -снипета е много добра алтернатива и ще го имам в предвид.

Относно уникалното ID, не на празно съм се спрял на класове. В последствие това което правя ще го имплементирам в CMS и мисля, че класовете ще ме улеснят.

Благодаря отново на всички и лек ден.