.header — фоновое изображение
.mask — полупрозрачный белый фон
.l1,.l2,.l3,.l4 — буквы вырезающие из полупрозрачного фона полноцветную картинку
.l5,.l6 — ссылка в рамке, вырезающей из полупрозрачного фона полноцветную картинку
Используются свойства: -webkit-text-fill-color:transparent; и -webkit-background-clip:text;
Полный пример:
HTML:
<div class="header">
<div class="mask">
<div class="text">
<div class="wrap">
<div class="l1">Lorem ipsum</div>
<div class="l2">dolor sit amet consectetur</div>
<div class="l3">sed do eiusmod tempor incididunt</div>
<div class="l4">Excepteur sint</div>
<a class="l5" href="#">Duis aute</a>
<div class="l6"><span><i></i></span></div>
</div>
</div>
</div>
</div>
CSS:
.header{
height:860px;
background:url("../images/header.jpg") center center;
background-size:cover;
position:relative;
.mask{
height:100%;
}
.text{
text-transform:uppercase;
text-align:center;
font-weight:900;
div,a{
width:100%;
position:absolute;
display:block;
left:0;
color:@color_white;
text-decoration:none;
}
.l1{
font-size:50px;
line-height:50px;
top:230px;
background-position:50% -230px;
}
.l2{
font-size:70px;
line-height:70px;
top:330px;
background-position:50% -330px;
}
.l3{
font-size:30px;
line-height:30px;
top:450px;
background-position:50% -450px;
}
.l4{
font-size:30px;
line-height:30px;
top:500px;
background-position:50% -500px;
}
.l5{
font-size:25px;
line-height:100px;
top:600px;
background-position:50% -600px;
z-index:2;
}
.l6{
top:600px;
z-index:1;
span{
display:inline-block;
width:570px;
z-index:0;
position:absolute;
top:0;
left:50%;
margin-left:-285px;
height:100px;
border:5px solid @color_white;
box-sizing:border-box;
i{
display:block;
height:90px;
}
}
}
}
&:not(:hover){
.mask{
background:fade(@color_white,70%);
.text{
div,a{
background-image:url("../images/header.jpg");
background-repeat:no-repeat;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
.l6{
span{
border-color:transparent;
background:url("../images/header.jpg") no-repeat 50% -605px;
i{
background:fade(@color_white,70%);
}
}
}
}
}
}
}