sample: simple css transition without JavaScript

HTML

<a href="#">link</a>
<p>text text text</p>

CSS

a {
  display: block;
  width: 50px;
  height: 20px;
}

p {
  opacity: 0;
  width: 100px;
  height: 100px;
  background-color: #fcc;
  transition: all 1s;
}

a:focus + p {
  opacity: 1;
}