<div class='parent'>
<span class='child1'>1</span>
<span class='child2'>2</span>
</div>.child1 {
display: block;
}
.child2 {
display: none;
}
.parent:hover .child1 {
display: none;
}
.parent:hover .child2 {
display: block;
}<div class="bg">
<div class="grad"></div>
</div>.bg {
position: relative;
height: 100px;
background: #f00;
}
.grad {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}opacity: 0.5linear-gradient(to top left, rgba(187, 67, 67, 0.5), rgba(239, 171, 75, 0.5));<a href="">Link</a>
<!--А некоторые вот так-->
<a href="javascript:void(0);">Link</a>overflow: hidden, так как вложенные элементы имеют фоновый цвет.
transform: skew