Animate Visibility

Use css3 to animate visibility. Use this instead of just changing display block/none. No accessibility considerations here.

by Carosn Shold

HTML

<div class="element">
    <a href="#">This is link</a>
</div>

CSS

.element {
    position: relative;
    height: 100px;
    width: 100%;
    background: #ccc;
}

.element a {
  position: absolute;
  top: 100%;
  display: block;
  width: 100%;
  background: pink;
    
  opacity: 0.2;
  visibility: hidden;
  transition: all 100ms;
}

.element:hover a {
  opacity: 1;
  visibility: visible;
}