Opacizzare immagini al passaggio del mouse

**PaoloMainas** · 04-04-2020, 16:21

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!

**Vincent.Zeno** · 04-04-2020, 21:56

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

**PaoloMainas** · 05-04-2020, 10:54

Originariamente inviata da Vincent.Zeno

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..

**Vincent.Zeno** · 05-04-2020, 11:02

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>

**PaoloMainas** · 05-04-2020, 11:23

Originariamente inviata da Vincent.Zeno

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..

**PaoloMainas** · 05-04-2020, 11:26

Ti link la pagina: rimosso

**Vincent.Zeno** · 05-04-2020, 11:31

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>

**PaoloMainas** · 05-04-2020, 12:04

Grazie infinite.

Discussione: Opacizzare immagini al passaggio del mouse

Strumenti discussione

Ricerca discussione

Visualizza

Opacizzare immagini al passaggio del mouse

Permessi di invio