HTML
15
1
<div class="container container-1">2
<img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/mix-blend-mode/scene.jpg" alt="Nature scene.">3
<h1>Breathe</h1>4
</div>5
<div class="container container-2">6
<img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/mix-blend-mode/scene.jpg" alt="Nature scene.">7
<h1>Breathe</h1>8
</div>9
<div class="container container-3">10
<img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/mix-blend-mode/scene.jpg" alt="Nature scene.">11
<img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/mix-blend-mode/bird.jpg" alt="Bird image." class="source">12
</div>13
<div class="container container-4">14
<h1><span>Colorful</span><span>Ideas</span></h1>15
</div>CSS
78
1
* {2
box-sizing: border-box;3
}4
5
body {6
background-color: #eee;7
color: #555;8
font-size: 1.1em;9
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;10
}11
12
.container {13
margin: 1em auto;14
width: 100%;15
max-width: 814px;16
position: relative;17
}18
19
.container-2 {20
/* uncomment this if you want to isolate the contents of the container */21
22
opacity: .99;23
}24
25
.container-1 img {26
max-width: 100%;27
mix-blend-mode: luminosity;28
}29
30
.container-1 h1,31
.container-2 h1 {32
position: absolute;33
bottom: 0;34
color: white;35
text-align: center;36
font-size: 5vw;37
width: 100%;38
text-transform: uppercase;39
margin-top: 5em;40
background-color: red;41
padding: .5em .25em;42
mix-blend-mode: difference;43
}44
45
.source {46
position: absolute;47
top: 0;48
left: 0;49
width: 100%;50
mix-blend-mode: overlay;51
}52
53
.container-4 {54
border: 1px solid #aaa;55
padding: 1em;56
background-color: white;57
}58
59
.container-4 h1 {60
width: 100%;61
text-align: center;62
font-size: 7em;63
font-weight: bold;64
isolation: isolate;65
letter-spacing: -5px;66
}67
68
.container-4 h1 span {69
display: block;70
color: deepPink;71
}72
73
.container-4 h1 span:last-child {74
margin-top: -1em;75
color: #1AD6AC;76
mix-blend-mode: difference;77
}78
JS
1
1