[SOLUCIONADO] Problema con Hover y mostrar y ocultar Texto

[domingogbr]

Hola a todos buenas noches,
llevo un día entero sin saber porque narices no me funciona este trozo de código, la idea es bastante simple tengo 4 imagenes en mi web y quiero que cada vez que me pongo encima de cada una de ellas se ponga en opaco y aparezca un texto:
Los codigos son los siguientes:
HTML:

Código HTML:

<div class="intro">
	<ul class="listjury" scrollpagination="enabled">
        	
	    <li class="current" rel="loaded">
	        <div  class="pic" style="opacity: 1;">
	            <img id="albert" alt="Albert" src="modules/mod_frontentrevistas/imagenes/botones_personas/boton_albert.jpg">
	            
	        </div>
	        <div class="info" >
	            <p  id="albert">Texto</p>
	        </div>   
	    </li>
	    <li class="current" rel="loaded">
	        <div class="pic" style="opacity: 1;">
	            <img id="alberto" alt="Alberto" src="modules/mod_frontentrevistas/imagenes/botones_personas/boton_alberto.jpg">
	        </div>
	        <div class="info">
	            <p >Texto</p>
	        </div>   
	    </li>
	    
	    <li class="current" rel="loaded">
	        <div class="pic" style="opacity: 1;">
	            <img id="mireia"  alt="Mireia" src="modules/mod_frontentrevistas/imagenes/botones_personas/boton_mireia.jpg">
	        </div>
	        <div class="info" >
	            <p>Texto</p>
	        </div>   
	    </li>
	    <li  class="current" rel="loaded">
	        <div class="pic" style="opacity: 1;">
	            <img id="carmen" alt="Carmen" src="modules/mod_frontentrevistas/imagenes/botones_personas/boton_carmen_2.jpg">
	        </div>
	        <div  class="info" >
	            <p >Texto</p>
	        </div>   
	    </li>
	
	</ul>
	</div> 

JQuerY:

Código HTML:

jQuery(document).ready(function($){
	 	
 	$("#albert").hover(function(){
    	$('.listjury > li.current .pic #albert').css('opacity','0.5' );
    	$('.listjury > li.current .info#albert').css('display','block');
 	}, function(){
    	$('.listjury > li.current .pic #albert').css('opacity','1' );
    	$('.listjury > li.current .info#albert').css('display','none');
 	}
 	
 	);
 	
 	
 	
	
	
 	
 	$("#alberto").hover(function(){
    	$('.listjury > li.current .info #alberto ').css('display','block' );
    	$('.listjury > li.current .pic #alberto').css('opacity','0.5' );
 	}, function(){
    	$('.listjury > li.current .info #alberto').css('display','none' );
    	$('.listjury > li.current .pic #alberto').css('opacity','1' );
 	}
 	
 	);
 	
   	$("#mireia").hover(function(){
    	$('.listjury > li.current .info #mireia').css('display','block' );
    	$('.listjury > li.current .pic #mireia').css('opacity','0.5' );
 	}, function(){
    	$('.listjury > li.current .info #mireia').css('display','none' );
    	$('.listjury > li.current .pic #mireia').css('opacity','1' );
 	}
 	
 	);	

	$("#carmen").hover(function(){
	    	$('.listjury > li.current .info #carmen').css('display','block' );
	    	$('.listjury > li.current .pic #carmen').css('opacity','0.5' );
	 	}, function(){
	    	$('.listjury > li.current .info #carmen').css('display','none' );
	    	$('.listjury > li.current .pic #carmen').css('opacity','1' );
	 	}
	 	
	 	);	
	 	
 	
	  	
 
});

Pues bien he conseguido hacer el efecto del oscurecer, pero no se porqué demonios no aparece el madilto texto.
He probado ha ponerle el id tanto al parrafo <p id="albert">, como quitar el p y crear una etiqueta div, como ponerselo a la etiqueta <div id=albert class="info"
Por defecto el trozo de css es el siguiente:

Código HTML:

.listjury > li .info{
	display:none;
	position:absolute;
	top:0;
	left:0;
	padding:100px 50px 0 50px;
	color:#fff;
}

Pero tan sólo tiene que cambiar esa propiedad y poner el display en block, y no sé porque no lo hace.

Siento las molestias y agradezco a todo el que me pueda ayudar.
Unn saludo muy muy fuere

[fhederico]

Hola,

Dos cosas, primero, un ID debe ser unico, si lo repites, cada elemento en este caso que tenga ese ID se le aplicara el efecto "opacity".

Y segundo, tienes mal la ruta que hace aparecer el texto, debe ser

$('.listjury > li.current .info').css('display','block');


Saludos

[domingogbr]

Hola buenas noches y muchísimas gracias por contestar, lo primero de todo.
Ya he probado esa opción y el problema se sigue presentando, le cambio la ruta y le dijo la que usted me ha indicado y me aparece en las 4 imagenes a la vez el texto, pero si lo que hago es que ponerle otro id, por ejemplo: albert1, y lo controlo en

Código HTML:

$('.listjury > li.current .info #albert1').css('display','block');

así, me deja de aparecer y no lo se porqué, ya que en el html está apareciendo:

Código HTML:

<li class="current" rel="loaded">
	        <div  class="pic" style="opacity: 1;">
	            <img id="albert" alt="Albert" src="modules/mod_frontentrevistas/imagenes/botones_personas/boton_albert.jpg">
	            
	        </div>
	        <div class="info" >
	            <p  id="albert1">Texto</p>
	        </div>   
	    </li> 

No se si me explico. quiero decir que no se porque razón aunque le ponga un id distinto y lo controle con esa sentencia dentro del js, pues no se porque no me lo muestra, o si me lo muestra, yo no lo veo.

Muchas gracias un saludo

[domingogbr]

Ea, ya lo he conseguido, era una tontería como una catedral de gorda, y es que por defecto en el css tenía display:none, entonces parece que no le hacía caso a la etiqueta y permanecia el valor de la clase. Así que se quita del css y se ajudica mediante js.
Punto y final.

Muchas Gracias a todos un saludo