12+ Bootstrap Hero Image Examples – csshint

1. Parallax Hero Image

Author

Marco Guglielmelli

Made with

HTML / CSS / JS

demo and code Get Hosting

2. Bootstrap 4 Hero Section

Author

Andrew Schultz

Made with

HTML / CSS / JS

demo and code Get Hosting

3. Hero effect–Magazine

Author

Cameron Campbell

Made with

HTML / CSS (SCSS) / JS

demo and code Get Hosting

4. Animated hero image with CSS clipping

Author

Mihael Tomić

Made with

HTML / CSS (PostCSS)

demo and code Get Hosting

5. full hero image

Author

Femi Oseni

Made with

HTML / CSS

demo and code Get Hosting

6. Full-Width Responsive CSS Hero Image with Heading

See the Pen <a href='https://codepen.io/action360ca/pen/GQBada'>Full-Width Responsive CSS Hero Image with Heading + Caption + Button + Popup</a> by Andre (<a href='https://codepen.io/action360ca'>@action360ca</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Andre

Made with

HTML / CSS

demo and code Get Hosting

7. Modern Hero

See the Pen <a href='https://codepen.io/15kstudios/pen/bLyVPm'>Foundation 6 – Modern Hero</a> by 15kstudios (<a href='https://codepen.io/15kstudios'>@15kstudios</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

15kstudios

Made with

HTML / CSS (Less) / JS

demo and code Get Hosting

8. Full page parallax hero image

See the Pen <a href='https://codepen.io/lennarthakker/pen/eBPxba'>Full page parallax hero image</a> by lennart (<a href='https://codepen.io/lennarthakker'>@lennarthakker</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

lennart

Made with

HTML / CSS (SCSS) / JS

demo and code Get Hosting

9. Responsive Hero Image with Opacity

See the Pen <a href='https://codepen.io/sarairivera/pen/gmBNmW'>Responsive Hero Image with Opacity</a> by Sarai Rivera (<a href='https://codepen.io/sarairivera'>@sarairivera</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Sarai Rivera

Made with

HTML / CSS

demo and code Get Hosting

10. Parallax Hero Image

See the Pen <a href='https://codepen.io/dedevillela/pen/rVMzrx'>Parallax Hero Image</a> by dedevillela (<a href='https://codepen.io/dedevillela'>@dedevillela</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

dedevillela

Made with

HTML / CSS / JS

demo and code Get Hosting

11. Bulma Hero image

See the Pen <a href='https://codepen.io/leonidboykov/pen/Edvvpm'>Bulma Hero image</a> by Leonid Boykov (<a href='https://codepen.io/leonidboykov'>@leonidboykov</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Leonid Boykov

Made with

HTML (Slim) / CSS (SaSS)

demo and code Get Hosting

12. Zooming Background Hero Image

See the Pen <a href='https://codepen.io/jnnfrcyl/pen/rpQNOB'>Zooming Background Hero Image</a> by Jennifer Coyle (<a href='https://codepen.io/jnnfrcyl'>@jnnfrcyl</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Jennifer Coyle

Made with

HTML / CSS

demo and code Get Hosting

13. CSS background image stacking with fade and overlay

See the Pen <a href='https://codepen.io/randseay/pen/bVWEPJ'>CSS background image stacking with fade and overlay</a> by Rand Seay (<a href='https://codepen.io/randseay'>@randseay</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Rand Seay

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

1. Parallax Hero Image

Author

Made with

2. Bootstrap 4 Hero Section

Author

Made with

3. Hero effect–Magazine

Author

Made with

4. Animated hero image with CSS clipping

Author

Made with

5. full hero image

Author

Made with

6. Full-Width Responsive CSS Hero Image with Heading

Author

Made with

7. Modern Hero

Author

Made with

8. Full page parallax hero image

Author

Made with

9. Responsive Hero Image with Opacity

Author

Made with

10. Parallax Hero Image

Author

Made with

11. Bulma Hero image

Author

Made with

12. Zooming Background Hero Image

Author

Made with

13. CSS background image stacking with fade and overlay

Author

Made with

You may also like