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