xxxxxxxxxx1
<div class="container my-4">2
3
<p class="font-weight-bold">Use bootstrap hover effects of masks to create a stunning image overlay effect.</p>4
5
<p><strong>Detailed documentation and more examples of Image overlay you can find in our <a href="https://mdbootstrap.com/docs/b4/jquery/css/hover-effects/"6
target="_blank">Bootstrap Hover Effects Docs</a> and <a href="https://mdbootstrap.com/docs/b4/jquery/css/masks/"7
target="_blank">Bootstrap Masks Docs</a>.</p>8
9
<hr class="my-4">10
11
<h4 class="mb-5 h4">Hover effects</h4>12
13
<p>Bootstrap hover effect appears when user positions computer cursor over an element without activating it. Hover14
effects make a website more interactive.</p>15
16
<section>17
18
<!--Grid row-->19
<div class="row mb-5">20
21
<!--Grid column-->22
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">23
24
<div class="view overlay">25
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="smaple image">26
<div class="mask flex-center rgba-red-strong">27
<p class="white-text">Strong overlay</p>28
</div>29
</div>30
31
</div>32
<!--Grid column-->33
34
<!--Grid column-->35
<div class="col-lg-4 col-md-6 mb-4 mb-md-0">36
37
<div class="view overlay">38
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="smaple image">39
<div class="mask flex-center rgba-red-light">40
<p class="white-text">Light overlay</p>41
</div>42
</div>43
44
</div>45
<!--Grid column-->46
47
<!--Grid column-->48
<div class="col-lg-4 col-md-6 mb-4 mb-md-0">49
50
<div class="view overlay">51
<img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid " alt="smaple image">52
<div class="mask flex-center rgba-red-slight">53
<p class="white-text">Super light overlay</p>54
</div>55
</div>56
57
</div>58
<!--Grid column-->59
60
</div>61
<!--Grid row-->62
63
<!--Grid row-->64
<div class="row mb-5">65
66
<!--Grid column-->67
<div class="col-md-6 mb-4 mb-md-0">68
69
<!--Zoom effect-->70
<div class="view overlay zoom">71
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid "72
alt="smaple image">73
<div class="mask flex-center">74
<p class="white-text">Zoom effect</p>75
</div>76
</div>77
78
</div>79
<!--Grid column-->80
81
<!--Grid column-->82
<div class="col-md-6">83
84
<h4 class="text-center mb-4">Shadow effect</h4>85
86
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(132).jpg" class="img-fluid rounded-circle hoverable"87
alt="smaple image">88
89
</div>90
<!--Grid column-->91
92
</div>93
<!--Grid row-->94
95
</section>96
97
<hr class="my-5">98
99
<h4 class="my-5 h4">Masks</h4>100
101
<p>Bootstrap masks alter the visibility of an element by either partially or fully hiding it. Masks are used to102
make content more visible in the picture.</p>103
104
<!--Grid row-->105
<div class="row">106
107
<!--Grid column-->108
<div class="col-md-6 mb-4">109
110
<!--Title-->111
<h2 class="secondary-heading mb-4">112
Pattern113
</h2>114
115
<div class="view">116
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">117
<div class="mask pattern-8 flex-center">118
<p class="white-text">.pattern-8</p>119
</div>120
</div>121
122
</div>123
<!--Grid column-->124
125
<!--Grid column-->126
<div class="col-md-6 mb-4">127
128
<!--Title-->129
<h2 class="secondary-heading mb-4">130
Overlay131
</h2>132
133
<div class="view">134
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (121).jpg" class="img-fluid" alt="smaple image">135
<div class="mask flex-center rgba-green-strong">136
<p class="white-text">strong overlay</p>137
</div>138
</div>139
140
</div>141
<!--Grid column-->142
143
</div>144
<!--Grid row-->145
146
<hr class="my-5">147
148
<h4 class="my-5 h4">Patterns</h4>149
150
<section>151
152
<!--Grid row-->153
<div class="row my-5">154
155
<!--Grid column-->156
<div class="col-md-6 mb-4 mb-md-0">157
158
<div class="view">159
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="smaple image">160
<div class="mask flex-center">161
<p class="white-text">no mask</p>162
</div>163
</div>164
165
</div>166
<!--Grid column-->167
168
<!--Grid column-->169
<div class="col-md-6 mb-4 mb-md-0">170
171
<div class="view">172
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">173
<div class="mask pattern-1 flex-center">174
<p class="white-text">.pattern-1</p>175
</div>176
</div>177
178
</div>179
<!--Grid column-->180
181
</div>182
<!--Grid row-->183
184
<!--Grid row-->185
<div class="row my-5">186
187
<!--Grid column-->188
<div class="col-md-6 mb-4 mb-md-0">189
190
<div class="view">191
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="smaple image">192
<div class="mask pattern-2 flex-center">193
<p class="white-text">.pattern-2</p>194
</div>195
</div>196
197
</div>198
<!--Grid column-->199
200
<!--Grid column-->201
<div class="col-md-6 mb-4 mb-md-0">202
203
<div class="view">204
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">205
<div class="mask pattern-3 flex-center">206
<p class="white-text">.pattern-3</p>207
</div>208
</div>209
210
</div>211
<!--Grid column-->212
213
</div>214
<!--Grid row-->215
216
<!--Grid row-->217
<div class="row my-5">218
219
<!--Grid column-->220
<div class="col-md-6 mb-4 mb-md-0">221
222
<div class="view">223
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="smaple image">224
<div class="mask pattern-4 flex-center">225
<p class="white-text">.pattern-4</p>226
</div>227
</div>228
229
</div>230
<!--Grid column-->231
232
<!--Grid column-->233
<div class="col-md-6 mb-4 mb-md-0">234
235
<div class="view">236
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">237
<div class="mask pattern-5 flex-center">238
<p class="white-text">.pattern-5</p>239
</div>240
</div>241
242
</div>243
<!--Grid column-->244
245
</div>246
<!--Grid row-->247
248
<!--Grid row-->249
<div class="row my-5">250
251
<!--Grid column-->252
<div class="col-md-6 mb-4 mb-md-0">253
254
<div class="view">255
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="smaple image">256
<div class="mask pattern-6 flex-center">257
<p class="white-text">.pattern-6</p>258
</div>259
</div>260
261
</div>262
<!--Grid column-->263
264
<!--Grid column-->265
<div class="col-md-6 mb-4 mb-md-0">266
267
<div class="view">268
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">269
<div class="mask pattern-7 flex-center">270
<p class="white-text">.pattern-7</p>271
</div>272
</div>273
274
</div>275
<!--Grid column-->276
277
</div>278
<!--Grid row-->279
280
<!--Grid row-->281
<div class="row my-5">282
283
<!--Grid column-->284
<div class="col-md-6 mb-4 mb-md-0">285
286
<div class="view">287
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="smaple image">288
<div class="mask pattern-8 flex-center">289
<p class="white-text">.pattern-8</p>290
</div>291
</div>292
293
</div>294
<!--Grid column-->295
296
<!--Grid column-->297
<div class="col-md-6 mb-4 mb-md-0">298
299
<div class="view">300
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">301
<div class="mask pattern-9 flex-center">302
<p class="white-text">.pattern-9</p>303
</div>304
</div>305
306
</div>307
<!--Grid column-->308
309
</div>310
<!--Grid row-->311
312
</section>313
314
315
</div>1
1
1
1
Console errors: 0