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.