Autore Topic: Immagini che cambiano tono  (Letto 1650 volte)

amaranto

  • Nuovo arrivato
  • *
  • Post: 15
Immagini che cambiano tono
« il: 11 Aprile, 2012, 15:11:41 »
Ciao a tutti, vorrei sapere se è possibile fare in home un effetto del genere:


http://www.gladiator1924.com


Grazie

stesil

  • Anziani
  • Utente storico
  • *
  • Post: 1219
    • quellidelcucuzzolo
Re:Immagini che cambiano tono
« Risposta #1 il: 11 Aprile, 2012, 18:37:51 »
Nella pagina che hai linkato l'effetto è stato ottenuto cambiando il valore di opacità dell'immagine quando c'è il focus su di essa.

Assegnando all'immagine una classe e scrivendone il relativo css, si dovrebbe visualizzare l'effetto (meglio controllare con più browser):

HTML
  <img class="light" width="xxx" height="yyy" src="nomecartella/nomeimmagine.png" alt="" />

CSS
img.light:hover {
filter: alpha (opacity=50);
opacity: 0.5;
}


StratoS

  • Anziani
  • Utente inesperto
  • *
  • Post: 118
Re:Immagini che cambiano tono
« Risposta #2 il: 11 Aprile, 2012, 22:30:39 »
Se questo effetto lo vuoi utilizzare sul Top o sul footer e sei capace di opacizzare le immagini con un programma di grafica, lo puoi fare direttamente da progamma con WX, addirittura potresti provare ad opacizzare l'immagine al passaggio del mouse con WX stesso. ;)
Ciao.
Augusto.

amaranto

  • Nuovo arrivato
  • *
  • Post: 15
Re:Immagini che cambiano tono
« Risposta #3 il: 11 Aprile, 2012, 22:51:35 »
No penso mi serva sulla zona centrale non sul top...ma il codice citato da stesil dova va inserito ?

StratoS

  • Anziani
  • Utente inesperto
  • *
  • Post: 118
Re:Immagini che cambiano tono
« Risposta #4 il: 11 Aprile, 2012, 22:55:17 »
Oggetto HTML
 <img class="light" width="xxx" height="yyy" src="nomecartella/nomeimmagine.png" alt="" />
 
Esperto CSS:
img.light:hover {
filter: alpha (opacity=50);
opacity: 0.5;
}

 
Ciao.
Augusto.