<div class="demo demo--luminosity demo--trans" data-name="Simple transition"></div>
<div class="demo demo--luminosity demo--before" data-name="With :before"></div>
BODY {
padding-top: 1em;
text-align: center;
font: 16px/1.4 Arial, sans-serif;
}
.demo {
display: inline-block;
position: relative;
width: 300px;
height: 185px;
margin: 1.5em .5em 0;
background: url(https://img-fotki.yandex.ru/get/5307/5091629.65/0_567ab_b8a9692a_L.jpg);
border-radius: 1em;
text-align: left;
transition: all .5s;
&--before:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(https://img-fotki.yandex.ru/get/5307/5091629.65/0_567ab_b8a9692a_L.jpg);
border-radius: inherit;
opacity: 0;
transition: all .5s;
}
&:after {
content: attr(data-name);
position: absolute;
top: -1.5em;
left: .5em;
}
}
.demo--luminosity {
background-color: steelblue;
background-blend-mode: luminosity;
}
.demo--trans:hover {
background-blend-mode: normal;
}
.demo--before:hover:before {
opacity: 1;
}
Also see: Tab Triggers