<div class="test">
  <a href="#"><br /><br />inside link</a>
</div>
<a href="#">outside link</a>

<button onClick="document.querySelector('.test').classList.toggle('visible')">toggle opacity</div>
body {
  background: black;
}
.test {
  position: absolute;
  background: white;
  width: 320px;
  height: 320px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s opacity, 0.5s visibility;
}

a {
  color: green;
}
a:hover {
  background: green;
}

.visible {
  opacity: 1;
  visibility: visible;
  transition: 0.5s opacity, 0 0.5s visibility;
}

button {
  float: right;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.