phpBB Italia chiude!
phpBB Italia ringrazia tutti gli utenti che hanno dato fiducia al nostro progetto per ben 9 anni, e che, grazie al grande lavoro fatto da tutto lo Staff (rigorosamente a titolo gratuito), hanno portato il portale a diventare il principale punto di riferimento italiano alla piattaforma phpBB.

Purtroppo, causa motivi personali, non ho più modo di gestirlo e portarlo avanti. Il forum viene ora posto in uno stato di sola lettura, nonché un archivio storico per permettere a chiunque di fruire di tutte le discussioni trattate.

Il nuovo portale di assistenza per l'Italia di phpBB diventa phpBB-Store.it, cui ringrazio per aver deciso di portare avanti questo grande progetto.

Grazie ancora,
Carlo - Amministratore di phpBB Italia

Combinare hover immagine e testo

Discussioni relative allo sviluppo grafico di un sito web utilizzando l'HTML/XHTML e CSS ed alla grafica in generale con l'utilizzo di applicazioni tipo Photoshop e GIMP.
Rispondi
Avatar utente
frank
Utente
Utente
Messaggi: 1908
Iscritto il: 25/11/2014, 8:02
Sesso: Maschio
Versione: 3.1.7-PL1
Server: UNIX/Linux
PHP: 5.5.29
Database: MySQL(i) 5.5.43-log

Combinare hover immagine e testo

Messaggio da frank » 09/02/2016, 6:51

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); 
}


Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Combinare hover immagine e testo

Messaggio da Sir Xiradorn » 09/02/2016, 12:05

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
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

Avatar utente
frank
Utente
Utente
Messaggi: 1908
Iscritto il: 25/11/2014, 8:02
Sesso: Maschio
Versione: 3.1.7-PL1
Server: UNIX/Linux
PHP: 5.5.29
Database: MySQL(i) 5.5.43-log

Re: Combinare hover immagine e testo

Messaggio da frank » 09/02/2016, 17:01

Non riesco a farlo funzionare

Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Combinare hover immagine e testo

Messaggio da Sir Xiradorn » 09/02/2016, 17:20

Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

Avatar utente
frank
Utente
Utente
Messaggi: 1908
Iscritto il: 25/11/2014, 8:02
Sesso: Maschio
Versione: 3.1.7-PL1
Server: UNIX/Linux
PHP: 5.5.29
Database: MySQL(i) 5.5.43-log

Re: Combinare hover immagine e testo

Messaggio da frank » 09/02/2016, 17:40

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); 
}

Avatar utente
frank
Utente
Utente
Messaggi: 1908
Iscritto il: 25/11/2014, 8:02
Sesso: Maschio
Versione: 3.1.7-PL1
Server: UNIX/Linux
PHP: 5.5.29
Database: MySQL(i) 5.5.43-log

Re: Combinare hover immagine e testo

Messaggio da frank » 09/02/2016, 19:17

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); 
}

Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Combinare hover immagine e testo

Messaggio da Sir Xiradorn » 09/02/2016, 21:29

Manca un punto su nella prima riga vicino la classe. Va bene? No beh devi inserire anche la parte che ho aggiunto io
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

Avatar utente
frank
Utente
Utente
Messaggi: 1908
Iscritto il: 25/11/2014, 8:02
Sesso: Maschio
Versione: 3.1.7-PL1
Server: UNIX/Linux
PHP: 5.5.29
Database: MySQL(i) 5.5.43-log

Re: Combinare hover immagine e testo

Messaggio da frank » 09/02/2016, 21:35

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); 
}

Avatar utente
Sir Xiradorn
Grafico
Grafico
Messaggi: 1659
Iscritto il: 11/08/2009, 12:41
Sesso: Maschio
Versione: 3.2.0
Server: UNIX/Linux
PHP: 5.6.15
Database: MariaDB 10.1.9
Località: Lontano....
Contatta:

Re: Combinare hover immagine e testo

Messaggio da Sir Xiradorn » 09/02/2016, 21:39

Si va bene visto che non vuoi opacizzare anche il testo o fare modifiche particolari
Sir Xiradorn
Immagine
~ XDojo - Xiradorn Lab Division - xiradorn.it ~
~ GitHub - XiradornLab ~

Immagine
Stargate - phpbb 3.0.x || 3.1.x || 3.2.x

Rispondi

Torna a “Web Design & Grafica”

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite