Use bootstrap hover effects of masks to create a stunning image overlay effect.

Detailed documentation and more examples of Image overlay you can find in our Bootstrap Hover Effects Docs and Bootstrap Masks Docs.

Hover effects

Bootstrap hover effect appears when user positions computer cursor over an element without activating it. Hover effects make a website more interactive.

smaple image

Strong overlay

smaple image

Light overlay

smaple image

Super light overlay

smaple image

Zoom effect

Shadow effect

smaple image

Masks

Bootstrap masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible in the picture.

Pattern

Image of ballons flying over canyons with mask pattern one.

.pattern-8

Overlay

smaple image

strong overlay

Patterns

smaple image

no mask

Image of ballons flying over canyons with mask pattern one.

.pattern-1

smaple image

.pattern-2

Image of ballons flying over canyons with mask pattern one.

.pattern-3

smaple image

.pattern-4

Image of ballons flying over canyons with mask pattern one.

.pattern-5

smaple image

.pattern-6

Image of ballons flying over canyons with mask pattern one.

.pattern-7

smaple image

.pattern-8

Image of ballons flying over canyons with mask pattern one.

.pattern-9