Pagina 1 di 1

Combinare hover immagine e testo

Inviato: 09/02/2016, 6:51
da frank
Quando metto il puntatore sull'immagine prende l'hover e il testo sotto cambia colore, se invece metto il puntatore sul testo questo cambia colore ma l'immagine non prende l'hover..

Codice: Seleziona tutto

<a class="linksX" href="pagina.php"><img class="rasize" src="aiutoX.jpg" alt="aiuto" title="">L'uomo vuole aiutare</a>

a.linksX:link {color: #408000; text-decoration: none;}
a.linksX:visited {color: #408000; text-decoration: none;}
a.linksX:hover {color: #cc0000; text-decoration: none;}

img.rasize { 
	width: 80px; 
	height: 80px;
	opacity: 1.0;
    filter: alpha(opacity=100); 
}

img.rasize:hover { 
	width: 80px; 
	height: 80px;
	opacity: 0.7;
    filter: alpha(opacity=70); 
}


Re: Combinare hover immagine e testo

Inviato: 09/02/2016, 12:05
da Sir Xiradorn
Perchè il link è inline. Devi usare il display block.

E ti aggiungo anche una cosa. Se vuoi che l'effetto sia lo stesso con l'hovering è ovvio che il tuo css ha degli errori abbastanza grossolani

Re: Combinare hover immagine e testo

Inviato: 09/02/2016, 17:01
da frank
Non riesco a farlo funzionare

Re: Combinare hover immagine e testo

Inviato: 09/02/2016, 17:20
da Sir Xiradorn

Re: Combinare hover immagine e testo

Inviato: 09/02/2016, 17:40
da frank
Mettendo così funziona, anche se non ho capito quel doppio hover nel css sotto

Codice: Seleziona tutto

a img, rasize { 
	width: 80px; 
	height: 80px;
	opacity: 1.0;
   filter: alpha(opacity=100); 
}

a:hover rasize, 
a:hover { 
	width: 80px; 
	height: 80px;
	opacity: 0.7;
   filter: alpha(opacity=70); 
}

Re: Combinare hover immagine e testo

Inviato: 09/02/2016, 19:17
da frank
L'ho modificato specifico per una classe (rasize), dimmi se va bene così.

Codice: Seleziona tutto

a img, rasize { 
	width: 80px; 
	height: 80px;
	opacity: 1.0;
    filter: alpha(opacity=100); 
}

a:hover img.rasize {
	width: 80px; 
	height: 80px;
	opacity: 0.7;
    filter: alpha(opacity=70); 
}

Re: Combinare hover immagine e testo

Inviato: 09/02/2016, 21:29
da Sir Xiradorn
Manca un punto su nella prima riga vicino la classe. Va bene? No beh devi inserire anche la parte che ho aggiunto io

Re: Combinare hover immagine e testo

Inviato: 09/02/2016, 21:35
da frank
Ho aggiunto il punto a img.rasize {...} così va benissimo, prova http://benessereforum.it/a-libero.php

Codice: Seleziona tutto

a img.rasize { 
	width: 80px; 
	height: 80px;
	opacity: 1.0;
    filter: alpha(opacity=100); 
}

a:hover img.rasize {
	width: 80px; 
	height: 80px;
	opacity: 0.7;
    filter: alpha(opacity=70); 
}

Re: Combinare hover immagine e testo

Inviato: 09/02/2016, 21:39
da Sir Xiradorn
Si va bene visto che non vuoi opacizzare anche il testo o fare modifiche particolari