Jquery e far comparire scritta su immagine

[Frykky]

Arrivo subito al dunque

http://www.ssscatenati.com/?page_id=2739

1)voi vedete le immagini piccole una accanto all'altra e opache o enormi e non opache?

Il codice della pagina è il seguente (inserito in una pagina wordpress)

<script type='text/javascript'>
$(function() {
        $(".foto_fade").css("opacity","0.4");
        $(".foto_fade").css("width","150px");
        $(".foto_fade").hover(function () {
            $("div").show("fade", {}, 1000);
            $(this).stop().animate({opacity: 1.0}, "slow");
        },
        function () {
        $(this).stop().animate({opacity: 0.4}, "slow");
        });
        $(".fotocontainer").hover(function () {
            $(this).show("fade", {}, 1000);
        });
});
</script>
<?php

if($_GET['Id_Stagione']==NULL){
    $Id_Stagione=5;
}else{
    $Id_Stagione=$_GET['Id_Stagione'];
}
$db = mysqli_connect(***********);
if( !$db|| mysqli_connect_errno() == true ) { 
    die( "Errore durante la connessione: ".mysqli_connect_error() ); 
}
else {
    $db->select_db( 'ssscaten_db' );
} 

$result = $db->query( 'SELECT Anno FROM Stagione WHERE Id_Stagione='.$Id_Stagione) or die( $db->error );
if ($result->num_rows != 0)
          {while($Stagione= $result->fetch_assoc()) 
{
$Anno=$Stagione['Anno'];
echo "<h1>ROSA GIOCATORI STAGIONE ".$Anno."</h1>";
echo "<img src='http://www.ssscatenati.com/Images/Figurine/FotoSquadra$Id_Stagione.png' style='width:100%'/>";
}}

$result = $db->query( 'SELECT r.Id_Giocatore, g.Nome_Cognome, g.Ruolo, g.Maglia FROM RosaStagionale as r INNER JOIN Giocatore as g ON r.Id_Giocatore=g.Id_Giocatore WHERE r.Id_Stagione='.$Id_Stagione) or die( $db->error );
if ($result->num_rows != 0)
          {
while($Stagione= $result->fetch_assoc()) 
{
$Id=$Stagione['Id_Giocatore'];
$Maglia=$Stagione['Maglia'];
$Nome=$Stagione['Nome_Cognome'];
$Immagine=str_replace(" ", "", $Nome);
echo "<div style='float: left;color: #9d864a; text-align: center; padding-bottom: 5px; font-weight: bold;'><a href='http://www.ssscatenati.com/?page_id=1002&Id_Giocatore=$Id&Id_Stagione=$Id_Stagione'><img class='foto_fade' src='http://www.ssscatenati.com/Images/Figurine/$Immagine$Id_Stagione.png' onerror='src=\"http://www.ssscatenati.com/Images/Figurine/SenzaFoto$Id_Stagione.png\"' /></a><br />$Maglia $Nome</div>";
}}

$SQL="select Id_Stagione, Descrizione, anno from Stagione order by Id_Stagione DESC";
$risultato=mysql_query($SQL);
?>

<div>
  <form role="search" method="get" id="searchform" action="http://www.ssscatenati.com/" class="clear-block">

      <div id="searchfield">
<select name='Id_Stagione'>";
<?
while($row = mysql_fetch_assoc($risultato)){
if($row['Id_Stagione']==$_GET['Id_Stagione']){ $selezionata="selected='selected' ";}else{$selezionata="";}
echo "<option value='".$row['Id_Stagione']."' $selezionata >".$row['anno']." - ".$row['Descrizione']."</option>";
}

?>  
</select>
     <input rel="Search" name="page_id" id="searchbox" class="text clearField clearFieldBlurred" value="2739" type="hidden">
      </div>

      <input value="Vai alla stagione" class="submit" type="submit">

 </form>
</div>

2)il piccolo script iniziale l'ho copiato da un sito e funziona. Ora vorrei aggiungere un'altro effetto ovvero che il nome del giocatore (attualmente sotto la foto) non si veda ma appaia SOPRA la foto con un effettino ganzo (tipo entrata da sotto) quando si passa col mouse sopra la foto.
Ho provato a modificare qualcosa ma senza risultati.
idee?

[Haruki]

1) opache ed affiancate

2)

echo "<div style='float: left;color: #9d864a; text-align: center; padding-bottom: 5px; font-weight: bold;'><div class="player" style="display: none;">$Maglia $Nome</div><a href='http://www.ssscatenati.com/?page_id=1002&Id_Giocatore=$Id&Id_Stagione=$Id_Stagione'><img class='foto_fade' src='http://www.ssscatenati.com/Images/Figurine/$Immagine$Id_Stagione.png' onerror='src=\"http://www.ssscatenati.com/Images/Figurine/SenzaFoto$Id_Stagione.png\"' /></a></div>"; 

poi applicaci una animazione

$('foto_fade').hover(function() {
	$('player').animate({
		//...
	}, 'slow');
}, function() {
	$('player').animate({
		//...
	}, 'slow');
}

[Frykky]

però aspetta così mi fa apparire tutti i nomi e non solo quello dove ho il mouse hover

[Haruki]

però aspetta così mi fa apparire tutti i nomi e non solo quello dove ho il mouse hover

sorry, mi sono dimenticato il this

è $('.player',this)

edit

dimenticavo:devi contestualizzare l'hover al div più esterno e non all'a

[Frykky]

macchè, mica mi riesce

[Haruki]

macchè, mica mi riesce

e che problema ti da?

[Angels]

Se devi fare una modifica alla scritta è semplice, tipo cambiare il font, il colore, la dimensione ok, per far comparire la scritta sopra è più complicato, perchè fare una scritta su un img, che non è sfondo è complicato.
Come t'ho scritto in PM, dipende se vuoi fare una scritta o un immagine con testo da sovrapporre alla foto.

[Frykky]

probabilmente esula dalle vostre competenze ma io vorrei un effetto tipo questo

http://fedex05.altervista.org/fade-h...ade-hover.html

che messo sul mio hosting funziona

http://www.ssscatenati.com/fade-hover.html

però dewntro una pagina del blog no

http://www.ssscatenati.com/?page_id=3066

[Haruki]

Devi giocare col CSS, perché se vedi con l'inspector parecchi stili dell'originale mancano

e, cosa fondamentale, manca lo script