CSS: link sfumato al passaggio del mouse

<html>
<head>

<style>   <!-- questa è la parte CSS che ci interessa -->
    .link{
     opacity: 1.0;   <!-- stadio iniziale del link. cioè la sua opacità iniziale -->
     text‐decoration: none;
     background: #1e9827;   <!-- colore primario -->
     width: 50px;
    }

    .link:hover{
     opacity: 0.5;   <!-- stadio secondario del link. cioè la sua opacità quando si passa sopra -->
     text‐decoration: none;
     background: #3bc545;  <!-- colore secondario -->
    }
    </style>

</head>

<body>
<div> <!-- menù orizzontale -->
<ul>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>
</ul>

</div>
<p><b>OPPURE</b></p>
<div>
<ul>  <!-- menù verticale -->
<li><a href="#" class="link">Link 1</a></li>
<li><a href="#" class="link">Link 2</a></li>
<li><a href="#" class="link">Link 3</a></li>
</ul>
</div>

</body>

</html>