Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Opacizzare immagini al passaggio del mouse

    Salve, sto cercando da ore un modo per Opacizzare un immagine al passaggio del mouse (anche se per voi sar una stupidaggine).

    Questo il codice di una piccola slide di 4 immagini con link annesso che ho fatto:

    codice:
    <table cellpadding="3">
    
    <tbody>
    <tr>
    <td align="center" width="25%"><a href="https://www.blogger.com/your%20blog%20url%20here/" target="_blank"> <img height="215" src="https://1.bp.blogspot.com/-c5tetIIQ8gU/XoYnEwalYlI/AAAAAAAAALE/z2i3646DeIIKwH6OpSk2v5ErRE62ac58gCKgBGAsYHg/s200/virtual%2Bmariner%2Byoutube3.jpg" width="215" /></a></td>
    
    
    <td align="center" width="25%"><a href="https://www.blogger.com/your%20blog%20url%20here/" target="_blank"> <img height="215" src="https://1.bp.blogspot.com/-c5tetIIQ8gU/XoYnEwalYlI/AAAAAAAAALE/z2i3646DeIIKwH6OpSk2v5ErRE62ac58gCKgBGAsYHg/s200/virtual%2Bmariner%2Byoutube3.jpg" width="215" /></a></td>
    
    
    <td align="center" width="25%"><a href="https://www.blogger.com/your%20blog%20url%20here/" target="_blank"> <img height="215" src="https://1.bp.blogspot.com/-c5tetIIQ8gU/XoYnEwalYlI/AAAAAAAAALE/z2i3646DeIIKwH6OpSk2v5ErRE62ac58gCKgBGAsYHg/s200/virtual%2Bmariner%2Byoutube3.jpg" width="215" /></a></td>
    
    
    <td align="center" width="25%"><a href="https://www.blogger.com/your%20blog%20url%20here/" target="_blank"> <img height="215" src="https://1.bp.blogspot.com/-c5tetIIQ8gU/XoYnEwalYlI/AAAAAAAAALE/z2i3646DeIIKwH6OpSk2v5ErRE62ac58gCKgBGAsYHg/s200/virtual%2Bmariner%2Byoutube3.jpg" width="215" /></a></td>
    
    
    </tr>
    </tbody>
    </table>
    Si potrebbe fare? qualche idea? Grazie mille!

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,594
    chiarisci una cosa:
    vuoi opacizzare l'immagine reale, o vuoi schiarirla quando NON onmouseover?
    per la seconda ipotesi semplice:
    codice:
    img {
      opacity: 0.5;
    }
    
    img:hover {
      opacity: 1.0;
    }

  3. #3
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    chiarisci una cosa:
    vuoi opacizzare l'immagine reale, o vuoi schiarirla quando NON onmouseover?
    per la seconda ipotesi semplice:
    codice:
    img {
      opacity: 0.5;
    }
    
    img:hover {
      opacity: 1.0;
    }
    Grazie per la risposta, ma dove dovrei inserire quella parte di codice? perch inserendola mi fa scomparire del tutto l'immagine..

  4. #4
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,594
    esempio pratico, poi devi adattarlo al tuo contesto:
    codice:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {
      opacity: 0.5;
    }
    
    img:hover {
      opacity: 1.0;
    }
    
    </style>
    </head>
    <body>
    
    qui la tua tabella
    
    </body>
    </html>

  5. #5
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    esempio pratico, poi devi adattarlo al tuo contesto:
    codice:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {
      opacity: 0.5;
    }
    
    img:hover {
      opacity: 1.0;
    }
    
    </style>
    </head>
    <body>
    
    qui la tua tabella
    
    </body>
    </html>
    Grazie mille! in effetti funziona, ma c' un problema, funziona su tutte le immagini della pagina (logo del sito, footer etc...) strano perch il codice racchiude solo la tabella..

  6. #6
    Ti link la pagina: rimosso
    Ultima modifica di PaoloMainas; 05-04-2020 a 12:03

  7. #7
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,594
    infatti ho detto che devi adattarlo al tuo contesto
    applica una classe alle immagini in questione. esempio:
    codice:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img.light {
      opacity: 0.5;
    }
    
    img.light:hover {
      opacity: 1.0;
    }
    
    </style>
    </head>
    <body>
    
    <table cellpadding="3">
    
    <tbody>
    <tr>
    <td align="center" width="25%"><a href="..." target="_blank"> <img class="light" height="215" src="..." width="215" /></a></td>
    
    <td align="center" width="25%"><a href="..." target="_blank"> <img class="light" height="215" src="..." width="215" /></a></td>
    
    <td align="center" width="25%"><a href="..." target="_blank"> <img class="light" height="215" src="..." width="215" /></a></td>
    
    <td align="center" width="25%"><a href="..." target="_blank"> <img class="light" height="215" src="..." width="215" /></a></td>
    
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  8. #8
    Grazie infinite.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.