estoy tratando de hacer un hover con Jquery pero no tengo exito, al pasar el mouse se me activa el hover para ambos elementos pero quiero que solo afecte al que le paso el mouse, aun asi quiero que mantengan la misma clase ya que se generan automaticamente. dejo imagenes de el antes y el despues del hover. NOTA: si se puede hacer por LESS mejor.
Despues:
Este es mi codigo en Jquery hasta el momento:
requirejs(['jquery', 'domReady!'], function ($) {
$(document).ready(function () {
$('.result-thumbnail').hover(function(){
$('.result-sub-content').css("display", "block");
$('.result-sub-content').css("transition", "all 1.5 ease");
}, function(){
$('.result-sub-content').css("display", "none");
});
$('.result-sub-content').hover(function(){
$('.result-sub-content').css("display", "block");
$('.result-sub-content').css("transition", "all 1.5 ease");
});
})
})