Collection of free HTML and CSS movie card code examples from codepen and other resources. Update of April 2019 collection. 5 new items.

Related Articles

  1. CSS Cards
  2. CSS Blog Cards
  3. CSS Card Hover Effects
  4. CSS Card Layouts
  5. CSS Flip Cards
  6. CSS Material Design Cards
  7. CSS Credit Cards
  8. CSS Product Cards
  9. CSS Profile Cards
  10. CSS Recipe Cards
  11. CSS Business Cards
Demo image: Netflix Inspired Movie Gallery

Author

  • Brixio Bodino

Made with

  • HTML / CSS

About a code

Netflix Inspired Movie Gallery

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bulma.css

Demo image: Movie Card Design Flex

Author

  • Anil Singh

Made with

  • HTML / CSS

About a code

Movie Card Design Flex

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Jorge Mendes

Made with

  • HTML / CSS

About a code

Movie Ticket Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ahmad Emran

Made with

  • HTML / CSS

About a code

CSS clip-path Card Hover Effects

CSS clip-path card hover effects. Only using HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Zayn

Made with

  • HTML / CSS

About the code

Movie Card UI

Movie card UI with pulse play button in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Jimmy Heuangpanga

Made with

  • HTML / CSS

About the code

Movie Card UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Movie Card

Author

  • Simone Bernabè

Made with

  • HTML / CSS (SCSS)

About the code

Movie Card

Responsive movie card - light version. Dark version: https://codepen.io/simoberny/pen/qxxOqj

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Movie Cards

Author

  • Ryan

Made with

  • HTML / CSS (SCSS)

About the code

Movie Cards

Responsive movie cards.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Responsive Movie Card

Author

  • Mehmet Burak Erman

Made with

  • HTML / CSS (SCSS)

About a code

Responsive Movie Card

HTML & CSS responsive movie card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Daily UI Movie Card

Author

  • George Mironidis

Made with

  • HTML / CSS (SCSS)

About the code

Daily UI Movie Card

Movie card in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Movie Card

Author

  • Alex Fernandez

Made with

  • HTML / CSS (SCSS)

About the code

Movie Card

Movie card in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Movie Card Interactive UI

Author

  • Reece McDonald

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Movie Card Interactive UI

Movie card interactive UI with pure CSS3 animation rating.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: Movie Card

Author

  • Andre Madarang

Made with

  • HTML / CSS (SCSS)

About the code

Movie Card

Movie card with HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css