17+ CSS Movie Card Examples

This post contains a total of 17+ CSS Movie Card Examples with Source Code. All these Movie Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Movie Card Examples

1. Movie Card

Made by Atiga Letova. CSS Movie card with Simplistic button hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,900&display=swap" rel="stylesheet">

<style>
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html,
body {
  height: 100%;
}

body {
  background: linear-gradient(#070707, #363636);
  font-family: "Poppins", sans-serif;
  color: #FFFFFF;
}

.container {
  max-width: 1030px;
  width: 100%;
  min-height: 100%;
  margin: auto;
  padding: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.movie_card {
  background-color: #11100B;
  width: 700px;
  height: 500px;
  position: relative;
  border-radius: 5%;
  overflow: hidden;
}

.bg-text {
  position: absolute;
  top: 0;
  left: 3%;
  z-index: 0;
  font-size: 120px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 2%;
}

.movie {
  width: 50%;
  height: 70%;
  position: absolute;
  top: 95px;
  right: 65px;
}
.movie_img {
  width: 50%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.movie_rating {
  margin-bottom: -15px;
  font-weight: 700;
  color: #FDC559;
}
.movie_rating span {
  background-color: #FDC559;
  margin-left: 3px;
  padding: 1px 5px;
  font-size: 14px;
  color: #19130D;
  border-radius: 5px;
}
.movie_title {
  font-size: 70px;
  text-transform: uppercase;
}
.movie_info {
  width: 80%;
  margin-top: -15px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #6A6965;
}
.movie_button {
  background: none;
  margin-top: 20px;
  padding: 12px 22px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  border: 1px solid #6A6965;
  border-radius: 30px;
  color: #FFFFFF;
  cursor: pointer;
  transition: ease-out 0.3s;
}
.movie_button i {
  color: #FDC559;
  margin-right: 5px;
}
.movie_button:hover {
  border-color: #FDC559;
  box-shadow: 1px 1px 10px rgba(253, 197, 89, 0.5);
}
.movie_button:focus {
  outline: none;
}
.movie_text {
  margin-top: 20px;
}
.movie_text p {
  font-size: 11px;
  color: #6A6965;
}
.movie_link {
  font-size: 12px;
  color: #6A6965;
  text-decoration: none;
  border-bottom: 1px solid #6A6965;
  transition: ease-out 0.3s;
}
.movie_link:hover {
  color: #FDC559;
  border-color: #FDC559;
}
</style>
</head>
<body>
  <div class="container">
  <div class="movie_card">
    <div class="movie_img">
      <img src="https://res.cloudinary.com/hetfy/image/upload/v1603287159/dicaprio_e15kfy.png">
		</div>

  <div class="bg-text">Inception</div>
    <div class="movie">
      <div class="movie_rating">8.8<i>/</i> 10 <span>IMDb</span></div>
			<h3 class="movie_title">Inception</h3>
        
			<div class="movie_info">
				<span>
					<i class="far fa-clock"></i>
					2h 28min
				</span>
				<span>
					<i class="fas fa-film"></i>
					Action, Adventure, Sci-Fi
				</span>
				<span>
					<i class="far fa-calendar"></i>
					16 July 2010 (USA)
				</span>
			</div>

			<button class="movie_button">
				<i class="fas fa-play"></i>
				Watch Movie
			</button>

			<div class="movie_text">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium maiores commodi magni, quod cumque  necessitatibus, eveniet, laboriosam exercitationem quaerat ducimus animi dolorem quia quis quasi!
				</p>
				<a class="movie_link" href="#">Read More</a>
			 </div>
		 </div>
	 </div>
</div>
</body>
</html>

2. Movie Card Component

Made by Hakan Guclu. Movie Cards with Fade and Slide Effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url("https://fonts.googleapis.com/css2?family=Catamaran:[email protected]&family=Fascinate+Inline&family=Poppins:[email protected];400;600;700&family=Roboto:[email protected];500;700;900&display=swap");
*,
*::before,
*::after {
  box-sizing: inherit;
}

*::selection {
  background: none;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

.App {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1280px;
}

.card {
  display: flex;
  width: 86.4rem;
  border-radius: 8px;
  padding: 40px;
  background: linear-gradient(to right, #016070, #002a3d);
}
.card__image-box {
  flex: 0 0 29.5rem;
  margin-left: 6.9rem;
}
.card__image {
  height: 274px;
  border-radius: 8px;
  transform-origin: center;
}
.card__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card__genre {
  font-size: 1.4rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.card__rating-box {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  color: #fff;
}
.card__icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.8rem;
}
.card__title {
  margin-top: 0.4rem;
  margin-bottom: 2.4rem;
  font-size: 3.6rem;
  font-weight: 700;
  color: #fff;
}
.card__description {
  margin-bottom: 3.2rem;
  font-size: 1.6rem;
  color: #e2e2e2;
  line-height: 1.8;
}
.card__actions {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.card__button {
  border: none;
  border-radius: 8px;
  padding: 1.6rem 2.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  color: #fff;
  background-color: none;
  background: linear-gradient(135deg, #d6379b 25%, #d136c1 50%, #9434a4 75%, #84309d);
  background-size: 200%;
  background-position: 0%;
  transition: all 0.2s ease-in-out;
}
.card__button:hover {
  background-position: 50%;
}
.card__button:active {
  background-position: 100%;
}
.card__link {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  font-size: 1.4rem;
  letter-spacing: 1px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}
.card__link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.faded {
  opacity: 0.5;
}

.arrow {
  width: 4rem;
  height: 4rem;
  opacity: 0.7;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.2s ease;
}
.arrow:hover {
  opacity: 0.4;
}
.arrow--left {
  left: 10%;
}
.arrow--right {
  right: 10%;
}
</style>
</head>
<body>
  <div id="root"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0-beta-fdc1d617a-20211118/umd/react-dom.production.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@types/[email protected]/index.d.ts'></script>
<script src='https://cdn.jsdelivr.net/npm/@types/[email protected]/index.d.ts'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js'></script>
      <script id="rendered-js" >
"use strict";
const seed = [
    {
        genre: "Sci-Fi",
        title: "TRON: Legacy",
        description: "The son of a virtual world designer goes looking for his father and ends up inside the digital world that his father designed. He meets his father's corrupted creation and a unique ally who was born inside the digital world.",
        imgSrc: "https://ik.imagekit.io/htmlwow/experiments/cp-movie-card-component/tron_w5IDlI_J2.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1655470880578",
        rating: "6.8",
        reviewCount: 42,
        backgroundColor: "linear-gradient(to right, #016070, #002a3d)"
    },
    {
        genre: "Crime",
        title: "Kiss Kiss Bang Bang",
        description: "After being mistaken for an actor, a New York thief is sent to Hollywood to train under a private eye for a potential movie role, but the duo are thrown together with a struggling actress into a murder mystery.",
        imgSrc: "https://ik.imagekit.io/htmlwow/experiments/cp-movie-card-component/kkbb_zhzIi5YrW.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1655470880259",
        rating: "7.5",
        reviewCount: 11,
        backgroundColor: "linear-gradient(to right, #3C8FC2, #282E82)"
    },
    {
        genre: "Drama",
        title: "The Social Network",
        description: "As Harvard student Mark Zuckerberg creates the social networking site that would become known as Facebook, he is sued by the twins who claimed he stole their idea, and by the co-founder who was later squeezed out.",
        imgSrc: "https://ik.imagekit.io/htmlwow/experiments/cp-movie-card-component/social-network_PLeE2BRIE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1655470880226",
        rating: "7.7",
        reviewCount: 27,
        backgroundColor: "linear-gradient(to right, #423330, #171A23)"
    }
];
const { useLayoutEffect, useState, useRef } = React;
const tl = gsap.timeline();
const MovieCard = ({ movies }) => {
    const [index, setIndex] = useState(0);
    const [isAnimating, setIsAnimating] = useState(false);
    const cardRef = useRef(null);
    const imageRef = useRef(null);
    const contentRef = useRef(null);
    useLayoutEffect(() => {
        gsap.to(imageRef.current, {
            duration: 0,
            scale: 1.7,
            y: 14
        });
        gsap.to(cardRef.current, {
            duration: 0,
            background: movies[index].backgroundColor
        });
    }, [index, movies]);
    const handleClick = (direction) => {
        setIsAnimating(true);
        let newIndex = 0;
        if (direction === "left") {
            newIndex = index - 1;
            if (newIndex < 0) {
                newIndex = 2;
            }
        }
        else if (direction === "right") {
            newIndex = index + 1;
            if (newIndex > 2) {
                newIndex = 0;
            }
        }
        tl.to(imageRef.current, {
            duration: 0.8,
            scale: 1.7,
            opacity: 0,
            ease: `Power3.easeOut`,
            onComplete() {
                setIndex(() => newIndex);
            }
        })
            .to(contentRef.current, {
            duration: 0.8,
            y: 10,
            opacity: 0,
            ease: "Power3.easeOut"
        }, "-=0.8")
            .to(cardRef.current, {
            duration: 1,
            ease: "Power3.easeOut",
            background: movies[newIndex].backgroundColor
        }, "-=0.8")
            .to(imageRef.current, {
            duration: 0.8,
            scale: 1.7,
            y: 14,
            opacity: 1,
            ease: "Power3.easeOut"
        })
            .to(contentRef.current, {
            duration: 0.8,
            y: 0,
            opacity: 1,
            ease: "Power3.easeOut",
            onComplete() {
                setIsAnimating(false);
            }
        }, "-=0.8");
    };
    return (React.createElement("div", { className: "container" },
        React.createElement("svg", { onClick: !isAnimating ? () => handleClick("left") : () => { }, xmlns: "http://www.w3.org/2000/svg", className: "arrow arrow--left", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
            React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 19l-7-7 7-7" })),
        React.createElement("svg", { onClick: !isAnimating ? () => handleClick("right") : () => { }, xmlns: "http://www.w3.org/2000/svg", className: "arrow arrow--right", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
            React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 5l7 7-7 7" })),
        React.createElement("div", { ref: cardRef, className: "card" },
            React.createElement("div", { className: "card__image-box" },
                React.createElement("img", { ref: imageRef, className: "card__image", src: movies[index].imgSrc, alt: "TRON movie poster" })),
            React.createElement("div", { ref: contentRef, className: "card__content" },
                React.createElement("div", { className: "card__info" },
                    React.createElement("div", { className: "card__genre" }, movies[index].genre),
                    React.createElement("div", { className: "card__rating-box" },
                        React.createElement("svg", { className: "card__icon", xmlns: "http://www.w3.org/2000/svg", width: "16.5", height: "15.321", viewBox: "0 0 16.5 15.321" },
                            React.createElement("path", { id: "Icon_ionic-ios-star", "data-name": "Icon ionic-ios-star", d: "M18.124,8.679H12.706L11.06,3.765a.6.6,0,0,0-1.12,0L8.294,8.679H2.839a.591.591,0,0,0-.589.589.433.433,0,0,0,.011.1.566.566,0,0,0,.247.416l4.453,3.138L5.252,17.89a.591.591,0,0,0,.2.663.57.57,0,0,0,.331.144.722.722,0,0,0,.368-.133l4.346-3.1,4.346,3.1a.69.69,0,0,0,.368.133.529.529,0,0,0,.328-.144.584.584,0,0,0,.2-.663l-1.709-4.968,4.416-3.167.107-.092a.563.563,0,0,0-.435-.983Z", transform: "translate(-2.25 -3.375)", fill: "#ccb833" })),
                        React.createElement("span", { className: "card__rating" },
                            movies[index].rating,
                            React.createElement("span", { className: "faded" }, " / 10")))),
                React.createElement("h1", { className: "card__title" }, movies[index].title),
                React.createElement("p", { className: "card__description" }, movies[index].description),
                React.createElement("div", { className: "card__actions" },
                    React.createElement("button", { className: "card__button" }, "Stream Now"),
                    React.createElement("a", { href: "#!", className: "card__link" },
                        "Reviews (",
                        movies[index].reviewCount,
                        ")"))))));
};
const App = () => {
    return (React.createElement("div", { className: "App" },
        React.createElement(MovieCard, { movies: seed })));
};
ReactDOM.render(React.createElement(React.StrictMode, null,
    React.createElement(App, null)), document.getElementById("root"));
//# sourceURL=pen.js
    </script>
</body>
</html>

3. Breaking Bad Movie Card

Made by Steve. Simple Breaking Bad Movie card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,600,800,300);
body {
  background: #454545;
  font-family: Roboto;
}

.content {
  text-align: center;
}

.card {
  background-image: url('https://i.imgur.com/WL7lBiz.jpg'), -webkit-gradient( linear, right bottom, left bottom, color-stop(0, #E9C12B), color-stop(1, #EBC002), color-stop(1, #F4E003));
  /* Chrome */
  
  background-image: url(https://i.imgur.com/WL7lBiz.jpg), -webkit-linear-( linear, right bottom, left bottom, color-stop(0, #E9C12B), color-stop(1, #EBC002), color-stop(1, #F4E003));
  /* Chrome 10+, Saf5.1+ */
  
  background-image: url(https://i.imgur.com/WL7lBiz.jpg), -moz-linear-( linear, right bottom, left bottom, color-stop(0, #E9C12B), color-stop(1, #EBC002), color-stop(1, #F4E003));
  /* FF3.6+ */
  
  background-image: url(https://i.imgur.com/WL7lBiz.jpg), -o-linear-( linear, right bottom, left bottom, color-stop(0, #E9C12B), color-stop(1, #EBC002), color-stop(1, #F4E003));
  /* Opera 11.10+ */
  
  background-image: url(https://i.imgur.com/WL7lBiz.jpg), linear-( linear, right bottom, left bottom, color-stop(0, #E9C12B), color-stop(1, #EBC002), color-stop(1, #F4E003));
  /* W3C */
  
  background-repeat: no-repeat;
  background-position: 0 1px;
  background-size: contain;
  display: inline-block;
  margin: 10vh auto;
  width: 100%;
  min-width: 780px;
  max-width: 850px;
  min-height: 425px;
  -webkit-box-shadow: 0px 10px 15px 1px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0px 10px 15px 1px rgba(0, 0, 0, 0.23);
  box-shadow: 0px 10px 15px 1px rgba(0, 0, 0, 0.23);
  transition: ease .55s;
}

.breaking-bad {
  width: 100%;
  max-width: 65%;
  float: right;
  display: inline-block;
  text-align: left;
}

.title {
  font-weight: 600;
  font-size: 72px;
  width: 100%;
  display: inline-block;
  transition: ease .25s;
}

.nav {
  float: right;
  margin-right: 15px;
}

.nav ul li {
  display: inline-block;
  margin: 0px 5px;
  opacity: .45;
  color: #333;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
}

.facebook,
.twitter {
  opacity: .7!important;
}

.meta {
  display: inline-block;
  position: relative;
  top: -60px;
  left: -58px;
}

.meta li {
  display: inline-block;
  margin: 0px 25px;
  color: #222;
  opacity: .45;
  font-size: 13px;
}

.description {
  opacity: .55;
  font-size: 15px;
  margin-top: -55px;
  max-width: 80%;
  line-height: 1.7em;
}

.break {
  width: 80%;
  margin-left: 0px;
  background: #000;
  color: #000;
  height: 1px;
  box-shadow: none;
  opacity: .15;
  text-shadow: none;
}

.bottom-info {
  display: block;
  margin-top: 30px;
}

.watch {
  color: #fff;
  background: #222;
  padding: 14px 20px;
  font-size: 13px;
  border-radius: 22px;
  text-transform: uppercase;
  color: #f0f0f0;
  letter-spacing: 1.3px;
  margin-right: 25px;
  cursor: pointer;
  position: relative;
  top: 8px;
}

.watch:before {
  content: "β–Ά";
  color: #fff;
  position: relative;
  top: 2px;
  display: inline-block;
  width: 50px;
  height: 20px;
  font-size: 15px;
  left: 10px;
}

.plus {
  display: inline-block;
  position: relative;
  top: -1px;
  left: -2px;
  color: #F4E003;
  font-weight: 200;
  font-size: 10px;
  padding: 1px 3px;
  background: #333;
  border-radius: 150px;
  cursor: pointer;
}

.add-to {
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.add-meta {
  display: block;
  float: right;
  position: relative;
  left: -100px;
  font-size: 13px;
  top: 30px;
  color: #444;
  opacity: .55;
}

@media(max-width:850px) {
  .card {
    width: 95%;
    min-width: 200px;
  }
  .breaking-bad {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    text-align: center;
    background-color: rgba(233, 193, 43, 0.56);
    height: 100vh;
    float: none;
    text-align: center;
    display: block;
  }
  .title {
    font-size: 48px;
    background: -webkit-gradient( linear, right bottom, left bottom, color-stop(0, #E9C12B), color-stop(1, #EBC002), color-stop(1, #F4E003));
    border-bottom:solid 5px #111;
    padding: 25px 0;
    margin-top: -55px;
  }
  .nav ul {
    position: relative;
    top: -10px;
  }
  .card {
    background-position: 0px 100px;
    background-attachment:fixed;
  }
  .meta {
    top: -30px;
    left: 0;
  }
  .meta li {
    margin: 0px 1px;
    color: #333;
    opacity: .7;
  }
  .break {
    margin: 0 auto;
    width: 95%;
  }
  .add-to,
  .plus {
    position: relative;
    top: 6px;
  }
  .description {
    margin: 0 auto;
    opacity: .85;
    width: 95%;
    max-width: 100%;
    margin-top: 10px;
    text-align: center;
  }
}
</style>
</head>
<body>
  <section class="content">
  <main class="card">
    <div class="breaking-bad">
      <div class="nav">
        <ul>
          <li>Share</li>
          <li class="facebook"><i class="fa fa-facebook"></i></li>
          <li class="twitter"><i class="fa fa-twitter"></i></li>
          <li><i class="fa fa-ellipsis-v"></i></li>
        </ul>
      </div>
      <h1 class="title">Breaking Bad</h1>
      <ul class="meta">
        <li>9.5/10</li>
        <li>TV Series</li>
        <li>Crime, Drama, Thriller</li>
      </ul>
      <p class="description">A chemisty teacher diagnosed with a terminal lung cancer teams up with his former student to cook and sell crystal meth.</p>
      <hr class="break"/>
      <div class="bottom-info"><a class="watch">Watch Trailer</a><a class="plus">+</a><a class="add-to">Add to Watchlist</a><span class="add-meta">546 of your friends have watched this</span></div>
    </div>
  </main>
</section>
</body>
</html>

4. Movie Card Interactive UI With Pure CSS3 Animation Rating

Made by Reece McDonald. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
body {
  background: #e2e2e2;
  width: 98%;
  height: 100vh;
}
body .card {
  width: 800px;
  height: 400px;
  background: transparent;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
}
body .card_left {
  width: 40%;
  height: 400px;
  float: left;
  overflow: hidden;
  background: transparent;
}
body .card_left img {
  width: 100%;
  height: auto;
  border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
  position: relative;
}
body .card_right {
  width: 60%;
  float: left;
  background: #000000;
  height: 400px;
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
}
body .card_right h1 {
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  text-align: left;
  font-size: 40px;
  margin: 30px 0 0 0;
  padding: 0 0 0 40px;
  letter-spacing: 1px;
}
body .card_right__details ul {
  list-style-type: none;
  padding: 0 0 0 40px;
  margin: 10px 0 0 0;
}
body .card_right__details ul li {
  display: inline;
  color: #e3e3e3;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding: 0 40px 0 0;
}
body .card_right__rating__stars {
  position: relative;
  right: 160px;
  margin: 10px 0 10px 0;
  /***** CSS Magic to Highlight Stars on Hover *****/
  /* hover previous stars in list */
}
body .card_right__rating__stars fieldset, body .card_right__rating__stars label {
  margin: 0;
  padding: 0;
}
body .card_right__rating__stars .rating {
  border: none;
}
body .card_right__rating__stars .rating > input {
  display: none;
}
body .card_right__rating__stars .rating > label:before {
  margin: 5px;
  font-size: 1.25em;
  display: inline-block;
  content: "ο€…";
  font-family: FontAwesome;
}
body .card_right__rating__stars .rating > .half:before {
  content: "";
  position: absolute;
}
body .card_right__rating__stars .rating > label {
  color: #ddd;
  float: right;
}
body .card_right__rating__stars .rating > input:checked ~ label,
body .card_right__rating__stars .rating:not(:checked) > label:hover,
body .card_right__rating__stars .rating:not(:checked) > label:hover ~ label {
  color: #FFD700;
}
body .card_right__rating__stars .rating > input:checked + label:hover,
body .card_right__rating__stars .rating > input:checked ~ label:hover,
body .card_right__rating__stars .rating > label:hover ~ input:checked ~ label,
body .card_right__rating__stars .rating > input:checked ~ label:hover ~ label {
  color: #FFED85;
}
body .card_right__review p {
  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  padding: 0 40px 0 40px;
  letter-spacing: 1px;
  margin: 10px 0 10px 0;
  line-height: 20px;
}
body .card_right__review a {
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  padding: 0 0 0 40px;
  color: #ffda00;
  margin: 0;
}
body .card_right__button {
  padding: 0 0 0 40px;
  margin: 30px 0 0 0;
}
body .card_right__button a {
  color: #ffda00;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  border: 2px solid #ffda00;
  padding: 10px 10px 10px 40px;
  font-size: 12px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/COMdoWZ.png);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 7% 50%;
  border-radius: 5px;
  transition-property: all;
  transition-duration: 0.5s;
}
body .card_right__button a:hover {
  color: #000000;
  background-color: #ffda00;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/rFQ5dHA.png);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 10% 50%;
  cursor: pointer;
  transition-property: all;
  transition-duration: 0.5s;
}
</style>
</head>
<body>
  <div class='card'>
  <div class='card_left'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/h8fnwL1.png'>
  </div>
  <div class='card_right'>
    <h1>KILL  BILL:  VOL.  1</h1>
    <div class='card_right__details'>
      <ul>
        <li>2003</li>
        <li>111 min</li>
        <li>Action</li>
      </ul>
      <div class='card_right__rating'>
        <div class='card_right__rating__stars'>
          <fieldset class='rating'>
            <input id='star10' name='rating' type='radio' value='10'>
            <label class='full' for='star10' title='10 stars'></label>
            <input id='star9half' name='rating' type='radio' value='9 and a half'>
            <label class='half' for='star9half' title='9.5 stars'></label>
            <input id='star9' name='rating' type='radio' value='9'>
            <label class='full' for='star9' title='9 stars'></label>
            <input id='star8half' name='rating' type='radio' value='8 and a half'>
            <label class='half' for='star8half' title='8.5 stars'></label>
            <input id='star8' name='rating' type='radio' value='8'>
            <label class='full' for='star8' title='8 stars'></label>
            <input id='star7half' name='rating' type='radio' value='7 and a half'>
            <label class='half' for='star7half' title='7.5 stars'></label>
            <input id='star7' name='rating' type='radio' value='7'>
            <label class='full' for='star7' title='7 stars'></label>
            <input id='star6half' name='rating' type='radio' value='6 and a half'>
            <label class='half' for='star6half' title='6.5 stars'></label>
            <input id='star6' name='rating' type='radio' value='6'>
            <label class='full' for='star6' title='6 star'></label>
            <input id='star5half' name='rating' type='radio' value='5 and a half'>
            <label class='half' for='star5half' title='5.5 stars'></label>
            <input id='star5' name='rating' type='radio' value='5'>
            <label class='full' for='star5' title='5 stars'></label>
            <input id='star4half' name='rating' type='radio' value='4 and a half'>
            <label class='half' for='star4half' title='4.5 stars'></label>
            <input id='star4' name='rating' type='radio' value='4'>
            <label class='full' for='star4' title='4 stars'></label>
            <input id='star3half' name='rating' type='radio' value='3 and a half'>
            <label class='half' for='star3half' title='3.5 stars'></label>
            <input id='star3' name='rating' type='radio' value='3'>
            <label class='full' for='star3' title='3 stars'></label>
            <input id='star2half' name='rating' type='radio' value='2 and a half'>
            <label class='half' for='star2half' title='2.5 stars'></label>
            <input id='star2' name='rating' type='radio' value='2'>
            <label class='full' for='star2' title='2 stars'></label>
            <input id='star1half' name='rating' type='radio' value='1 and a half'>
            <label class='half' for='star1half' title='1.5 stars'></label>
            <input id='star1' name='rating' type='radio' value='1'>
            <label class='full' for='star1' title='1 star'></label>
            <input id='starhalf' name='rating' type='radio' value='half'>
            <label class='half' for='starhalf' title='0.5 stars'></label>
          </fieldset>
        </div>
      </div>
      <div class='card_right__review'>
        <p>The lead character, called 'The Bride,' was a member <br/> of the Deadly Viper Assassination Squad, led by her <br/> lover 'Bill.' Upon realizing she was pregnant with Bill's<br/> child, 'The Bride' decided to escape her life as a killer.<br/> She fled to Texas, met a young man, who, on the day<br/> of their wedding rehearsal was gunned down by....</p>
        <a href="https://www.imdb.com/title/tt0266697/plotsummary?ref_=tt_stry_pl" target='_blank'>Read more</a>
      </div>
      <div class='card_right__button'>
        <a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>WATCH TRAILER</a>
      </div>
    </div>
  </div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script id="rendered-js" >
    </script>
</body>
</html>
 

5. Basic Movie Card

Made by Tranquility. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #43423E;
}

a {
  text-decoration: none;
  color: #5C7FB8;
}

a:hover {
  text-decoration: underline;
}

.movie-card {
  font: 14px/22px "Lato", Arial, sans-serif;
  color: #A9A8A3;
  padding: 40px 0;
}

.container {
  margin: 0 auto;
  width: 780px;
  height: 640px;
  background: #F0F0ED;
  border-radius: 5px;
  position: relative;
}

.hero {
  height: 342px;
  margin: 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.hero:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: red;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/hobbit_bg.jpg");
  z-index: -1;
  -webkit-transform: skewY(-2.2deg);
          transform: skewY(-2.2deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
}

.cover {
  position: absolute;
  top: 160px;
  left: 40px;
  z-index: 2;
}

.details {
  padding: 190px 0 0 280px;
}
.details .title1 {
  color: white;
  font-size: 44px;
  margin-bottom: 13px;
  position: relative;
}
.details .title1 span {
  position: absolute;
  top: 3px;
  margin-left: 12px;
  background: #C4AF3D;
  border-radius: 5px;
  color: #544C21;
  font-size: 14px;
  padding: 0px 4px;
}
.details .title2 {
  color: #C7C1BA;
  font-size: 23px;
  font-weight: 300;
  margin-bottom: 15px;
}
.details .likes {
  margin-left: 24px;
}
.details .likes:before {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/icon_like.png");
  position: relative;
  top: 2px;
  padding-right: 7px;
}

.description {
  bottom: 0px;
  height: 200px;
  font-size: 16px;
  line-height: 26px;
  color: #B1B0AC;
}

.column1 {
  padding-left: 50px;
  padding-top: 120px;
  width: 220px;
  float: left;
  text-align: center;
}

.tag {
  background: white;
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 14px;
  margin-right: 4px;
  line-height: 35px;
  cursor: pointer;
}

.tag:hover {
  background: #ddd;
}

.column2 {
  padding-left: 41px;
  padding-top: 30px;
  margin-left: 20px;
  width: 480px;
  float: left;
}

.avatars {
  margin-top: 23px;
}
.avatars img {
  cursor: pointer;
}
.avatars img:hover {
  opacity: 0.6;
}
.avatars a:hover {
  text-decoration: none;
}

fieldset, label {
  margin: 0;
  padding: 0;
}

/****** Style Star Rating Widget *****/
.rating {
  border: none;
  float: left;
}

.rating > input {
  display: none;
}

.rating > label:before {
  margin: 5px;
  margin-top: 0;
  font-size: 1em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before {
  content: "\f089";
  position: absolute;
}

.rating > label {
  color: #ddd;
  float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #FFD700;
}

/* hover previous stars in list */
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #FFED85;
}

a[data-tooltip] {
  position: relative;
}

a[data-tooltip]::before,
a[data-tooltip]::after {
  position: absolute;
  display: none;
  opacity: 0.85;
}

a[data-tooltip]::before {
  /*
   * using data-tooltip instead of title so we 
   * don't have the real tooltip overlapping
   */
  content: attr(data-tooltip);
  background: #000;
  color: #fff;
  font-size: 13px;
  padding: 5px;
  border-radius: 5px;
  /* we don't want the text to wrap */
  white-space: nowrap;
  text-decoration: none;
}

a[data-tooltip]::after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
  display: block;
}

/** positioning **/
/* top tooltip */
a[data-tooltip][data-placement="top"]::before {
  bottom: 100%;
  left: 0;
  margin-bottom: 40px;
}

a[data-tooltip][data-placement="top"]::after {
  border-top-color: #000;
  border-bottom: none;
  bottom: 50px;
  left: 20px;
  margin-bottom: 4px;
}
</style>
</head>
<body>
  <div class="movie-card">
  
  <div class="container">
    
    <a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/hobbit_cover.jpg" alt="cover" class="cover" /></a>
        
    <div class="hero">
            
      <div class="details">
      
        <div class="title1">The Hobbit <span>PG-13</span></div>

        <div class="title2">The Battle of the Five Armies</div>    
        
        <fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" checked /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
  </fieldset>
        
        <span class="likes">109 likes</span>
        
      </div> <!-- end details -->
      
    </div> <!-- end hero -->
    
    <div class="description">
      
      <div class="column1">
        <span class="tag">action</span>
        <span class="tag">fantasy</span>
        <span class="tag">adventure</span>
      </div> <!-- end column1 -->
      
      <div class="column2">
        
        <p>Bilbo Baggins is swept into a quest to reclaim the lost Dwarf Kingdom of Erebor from the fearsome dragon Smaug. Approached out of the blue by the wizard Gandalf the Grey, Bilbo finds himself joining a company of thirteen dwarves led by the legendary warrior, Thorin Oakenshield. Their journey will take them into the Wild; through... <a href="#">read more</a></p>
        
        <div class="avatars">
          <a href="#" data-tooltip="Person 1" data-placement="top">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/hobbit_avatar1.png" alt="avatar1" />
          </a>
          
          <a href="#" data-tooltip="Person 2" data-placement="top">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/hobbit_avatar2.png" alt="avatar2" />
          </a>
          
          
          <a href="#" data-tooltip="Person 3" data-placement="top">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/hobbit_avatar3.png" alt="avatar3" />
          </a>
          
        </div> <!-- end avatars -->
        
        
        
      </div> <!-- end column2 -->
    </div> <!-- end description -->
    
   
  </div> <!-- end container -->
</div> <!-- end movie-card -->
</body>
</html>

6. Netflix Stranger Things Card

Made by Roger Colque Calcina. Netflix Stranger Things Card with Add to Watchlist and play button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Cabin:400,700|Montserrat|Nunito+Sans:400,700");
@import url(//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#background {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-image: url("https://image.tmdb.org/t/p/original/k2dvD8ijfpxMKwZJyodBzAXh8uT.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* Custom, iPhone Retina */
  /* Extra Small Devices, Phones */
  align-items: center;
  width: 69%;
  height: 75%;
  box-shadow: 2px 5px 15px 1px #04060a;
}
@media only screen and (min-width: 320px) {
  .card-container {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 480px) {
  .card-container {
    flex-wrap: nowrap;
  }
}

.poster-container {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}

#poster {
  -webkit-filter: contrast(120%);
  transform: scale(1.5);
  transform-origin: 70% 19%;
  width: 100%;
  height: 100%;
  background-image: url("https://pitchfork-cdn.s3.amazonaws.com/content/ST-Vinyl-Vol-1-Front-Cover_3000.jpg");
  background-size: cover;
  background-position: 50% 50%;
}

.card-description {
  letter-spacing: 0.3em;
  background: #000;
  padding: 3em;
  line-height: 2em;
  font-family: "Nunito Sans", sans-serif;
  color: white;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  width: 100%;
  height: 100%;
}
.card-description .logo-container {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
.card-description .logo-container .logo {
  transform: scale(1.2);
  width: 35%;
  height: 100%;
  background-image: url("http://www.brandemia.org/sites/default/files/sites/default/files/logo_netflix_antes.jpg");
  background-size: cover;
  background-position: 0% 50%;
  background-repeat: no-repeat;
}
.card-description p, .card-description .rating, .card-description .buttons {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
.card-description p {
  font-size: 0.85em;
  letter-spacing: 2px;
}
.card-description .rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-description .span {
  color: #ec2416;
  font-weight: 700;
}
.card-description label {
  font-family: FontAwesome;
  font-size: 1.4em;
  color: #ffd700;
}
.card-description label:before {
  content: "ο€…";
}
.card-description .buttons {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  display: flex;
  justify-content: space-between;
}
.card-description .buttons .button {
  transition: 0.4s;
  cursor: pointer;
  padding-right: 1.2em;
  padding-left: 1.2em;
  padding: 1.6em;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  letter-spacing: initial;
  border: 2px solid white;
  color: white;
  border-radius: 11px;
  height: 40px;
}
.card-description .buttons .play {
  border: none;
  background: #ec2416;
  width: 35%;
}
.card-description .buttons .play:after {
  font-family: FontAwesome;
  font-size: 1.5em;
  font-weight: lighter;
  content: "";
}
.card-description .buttons .add {
  width: 55%;
}
.card-description .buttons .add:hover {
  border: 2px solid #ec2416;
  color: #ec2416;
}
.card-description .buttons .add:before {
  font-family: FontAwesome;
  font-size: 1.5em;
  font-weight: lighter;
  content: "";
}
</style>
</head>
<body>
  <div id="background">
  <article class="card-container">
    <div class="poster-container">
      <div id="poster">
      </div>
    </div>
    
    <div class="card-description">
      <div class="logo-container">
      <div class="logo">
      </div>
      </div>
      <h2>STRANGER THINGS</h2>
      <p class="rating">
        <span>
          <label></label>
          <label></label>
          <label></label>
          <label></label>
          <label></label>
        </span>
        <span>(3,568)</span>
        <span>2016</span>
        <span>2h 13m</span>
      </p>
      <p>In a small town where everyone knows everyone, a       peculiar incident starts a chain of events that leads to the disappearance of a child - which begins to tear at the fabric of an otherwise peaceful community ...</p>
      
      <p><span class="span">Starring:</span> Winona Ryder, David Harbour, Finn Wolfhard... </p>
      <p><span class="span">Directed by:</span> The Duffer Brothers</p>
      <div class="buttons">
        <div class="button play">PLAY NOW</div>
        
        <div class="button add">ADD TO WATCHLIST</div>
      </div>
    </div>
  </article>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script id="rendered-js" >
/*
https://api.themoviedb.org/3/account/{account_id}/favorite/movies?api_key=516adf1e1567058f8ecbf30bf2eb9378&session_id=c8e2bd462c246b141fd19ddba2e5f091f6f8aedb&language=en-US&sort_by=created_at.asc&page=1

*/

const endpoint = 'https://api.themoviedb.org/3/account/{account_id}/favorite/movies?api_key=516adf1e1567058f8ecbf30bf2eb9378&session_id=c8e2bd462c246b141fd19ddba2e5f091f6f8aedb&language=en-US&sort_by=created_at.asc&page=1.json';

const fav = [];

fetch(endpoint).
then(blob => blob.json())
//.then(function(data) {
//let favMovies = blob.results
.then(data => fav.push(...blob.results));
    </script>
</body>
</html>

7. Movie Cards with simple hover effect

Made by Cheryl Codes. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
 
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400');
body {
  font-family: 'Raleway', sans-serif;
  font-weight: thin;
  background: black;
}
body:after{
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: -1;
  width: 200%;
  height: 200%;
  background: url('https://i.pinimg.com/736x/f1/2e/2a/f12e2a1c7e8393322f71358a79139436--jedi-sith-episode-vii.jpg');
  background-size: contain;
  background-position: 600px -200px;
  
  filter: blur(30px);
}
.movie-card {
  position: relative;
  box-sizing: border-box;
  width: 50%;
  max-width: 800px;
  height: 300px;
  background-position: center;
  background-size: cover;
  margin: 4vh auto;
  border-radius: 4px;
  box-shadow: 2px 3px 12px rgba(0, 0, 0, .4);
  color: white;
  padding: 2vh 3%;
}
.movie-card:after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to right, rgba(40,40,60,1) 0%,rgba(40,0,60,0) 90%);
  background-blend-mode: multiply;
  will-change: transform;
  z-index: 0;
}
i {
  font-size: .7em;
  color: #ff5b84;
}
h1 {
  font-size: 170%;
  position: relative;
  z-index: 10;
}
span {
  display: inline-block;
  position: relative;
  z-index: 10;
  margin-right: 80px;
  color: rgb(210, 210, 210);
}
.watch {
  display: block;
  border: 1px solid white;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  color: white;
  padding: 10px;
  text-align: center;
  background: rgba(0, 0, 0, .3);
  margin: 20px 0px;
  outline: none;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  transition: all .2s;
}
button:hover {
  background: rgba(255, 255, 255, .8);
  color: black;
  box-shadow: 0 0 10px rgba(255,255,255,.5);
  mix-blend-mode: screen;
}
button:active {
  transform: translateY(2px);
}
p {
  position: relative;
  z-index: 10;
  font-size: .8em;
  width: 60%;
  height: 35%;
}

@media (max-width: 768px) {
  body {
/*     background: none; */
  }
  .movie-card {
    width: 75%;
    height: 200px;
  }
  h1 {
  font-size: 120%;
  }
  p {
    display: none;
/*     overflow: hidden;
    width: 100%;
    height: 30%; */
  }
  .watch {
    margin: 5% auto;
  }
}
@media (max-width: 500px) {
  .movie-card {
    width: 100%;
  }
}
</style>
</head>
<body>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
var movieDB = [
{ title: "Toy Story",
  rating: 4,
  hasWatched: true,
  runtime: 124,
  synopsis: "A cowboy doll is profoundly threatened and jealous when a new spaceman figure supplants him as top toy in a boy's room.",
  background: "url('https://pmcvariety.files.wordpress.com/2014/11/toystory3_img10_720.jpg?w=1000&h=563&crop=1')" },

{ title: "The Incredibles 2",
  rating: 5,
  hasWatched: false,
  runtime: 92,
  synopsis: "Helen is called on to lead a campaign to bring Supers back, while Bob navigates the day-to-day heroics of 'normal' life at home with Violet, Dash and baby Jack-Jack - whose superpowers are about to be discovered.",
  background: "url('https://www.verdict.co.uk/wp-content/uploads/2018/07/incredibles-2-1200-1200-675-675-crop-000000.jpg')" },

{ title: "Spider-Man: Homecoming",
  rating: 3.5,
  hasWatched: true,
  runtime: 130,
  synopsis: "Peter Parker balances his life as an ordinary high school student in Queens with his superhero alter-ego Spider-Man, and finds himself on the trail of a new menace prowling the skies of New York City.",
  background: "url('https://images8.alphacoders.com/815/815755.jpg')" },

{ title: "The Avengers",
  rating: 2.5,
  hasWatched: false,
  runtime: 118,
  synopsis: "Earth's mightiest heroes must come together and learn to fight as a team if they are going to stop the mischievous Loki and his alien army from enslaving humanity.",
  background: "url('https://pmcvariety.files.wordpress.com/2014/04/01-avengers-2012.jpg?w=1000&h=563&crop=1')" }];



function printMovieInfo(element) {
  if (element.hasWatched)
  console.log("You have watched " + element.title + " - " + element.rating + " stars");else

  console.log("You have not seen " + element.title + " - " + element.rating + " stars");
}

// console stuff
movieDB.forEach(printMovieInfo);

movieDB.forEach(createCard);

function createCard(element, i) {
  // card
  var card = document.createElement('div');
  card.setAttribute("class", "movie-card");
  card.style.backgroundImage = element.background;

  // title
  var title = document.createElement('h1');
  title.innerText = element.title;
  card.appendChild(title);

  // runtime
  var runtime = document.createElement('span');
  runtime.innerText = element.runtime + " min";
  card.appendChild(runtime);

  // rating
  var star = document.createElement("i");
  star.setAttribute("class", "fas fa-star");
  var rating = document.createElement('span');
  rating.innerText = element.rating + " ";
  rating.appendChild(star);
  card.appendChild(rating);

  // synopsis
  var synopsis = document.createElement('p');
  synopsis.innerText = element.synopsis;
  card.appendChild(synopsis);

  // watch/watch again
  var watch = document.createElement('button');
  watch.setAttribute("class", "watch");
  if (element.hasWatched == false)
  watch.innerText = "WATCH MOVIE";else

  watch.innerText = "WATCH AGAIN";
  card.appendChild(watch);

  document.body.appendChild(card);
}
//# sourceURL=pen.js
    </script>
</body>
</html>

8. Movie Card UI

Made by Kotla Soma Srinivasu. Simple Movie Card UI. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Raleway+Dots" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo|Merriweather+Sans" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
<style>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#mainContainer{
  height:800px;
  background-image:url("http://i.imgrpost.com/imgr/2017/07/18/bond.jpg");
  background-size: cover;
  display: block;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  height: 800px;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 1;
}
div.container{
  width:881.6px;
  height:522.4px;
  background-image:url("http://i.imgrpost.com/imgr/2017/07/18/bond.jpg");
  background-size: cover;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 100px;
  left: 320px;
  z-index: 2;
  display:flex;
}
#left{
  width:50%;
  font-family: 'Raleway', sans-serif;
  color:white;
}
#left > h1{
  letter-spacing:0.5em;
  font-size:54px;
  padding-left:16px;
  padding-top:16px;
}
#info{
  padding-top:15px;
  padding-left:16px;
  font-size:14px;
/*   font-family: 'Merriweather Sans', sans-serif; */
  font-family: 'Exo', sans-serif;
}
#info > ul#menu li {
    display:inline;
    padding-right:8px;
    letter-spacing:0.1em;
}
#container {
  margin: 20px;
  width: 50px;
  height: 50px;
}
#rating {
  display:flex;
  padding-left:25px;
}
#rating > h3{
  padding-top:35px;
  font-size:14px;
}
#right{
  width:50%;
  padding-top:100px;
  font-size:18px;
  padding-left:120px;
  padding-right:10px;
  font-family: 'Raleway Dots', sans-serif;
  color:white;
/*   font-weight:bold; */
}
#trailer{
  margin-top:50px;
  margin-left:20px;
  border:3px solid #1ABC9C;
  color:#1ABC9C;
  border-radius:1.2em;
  width:70%;
  padding:6px;
  padding-left: 15px;
  display:flex;
  justify-content:space-around;
  cursor:pointer;
}
#trailer > h4{
  padding-left:10px;
  font-size:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:bolder;
  font-family: 'Raleway', sans-serif;
}
</style>
</head>
<body>
  <div id="mainContainer">
</div>
<div class="container">
    <div id="left">
      <h1>SPECTRE</h1>
      <div id="info">
        <ul id="menu">
          <li>2015</li>
          <li>148 min</li>
          <li>Action&nbsp;&nbsp;&nbsp;|</li>
          <li>Adventure&nbsp;&nbsp;&nbsp;|</li>
          <li>Thriller</li>
        </ul>
      </div>
      <div id="rating">
        <h3>IMDb Rating:</h3>
        <div id="container"></div>
      </div>
    </div>
    <div id="right">
      A cryptic message from Bond's past sends him on a trail to uncover a sinister organization. While M battles political forces to keep the secret service alive, Bond peels back the layers of deceit to reveal the terrible truth behind SPECTRE.
      <div id="trailer">
        <i class="fa fa-play" aria-hidden="true"></i>
        <h4>WATCH TRAILER<h4>
    </div>
  </div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js'></script>
      <script id="rendered-js" >
var bar = new ProgressBar.Circle(container, {
  strokeWidth: 10,
  easing: 'easeInOut',
  duration: 1400,
  color: '#f92b1e',
  trailColor: '#BDC3C7',
  trailWidth: 5,
  svgStyle: null });


bar.setText('6.8');
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '0.9rem';
bar.text.style.color = '#ECF0F1';
bar.animate(0.68); // Number from 0.0 to 1.0
//# sourceURL=pen.js
    </script>
</body>
</html>

9. Movie card with Slide Up Animation

Made by LeTea. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  background: #111;
  color: #efefef;
}

.card {
  width: 360px;
  height: 400px;
  margin: auto;
  align-self: center;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.card:hover .keyvisual {
  transform: translate(0, 0%) translateZ(0);
}

.keyvisual {
  position: relative;
  height: 50%;
  width: 100%;
  background: transparent;
  background-image: url("https://dkfhw9rzsr80z.cloudfront.net/IFI-TW-001-A0160/artworks/posters/IFI-TW-001-A0160-P544.jpg");
  background-size: cover;
  background-position: center center;
  transform: translate(0, 79.5%) translateZ(0);
  transition: transform 0.5s ease-in-out;
}

.content {
  position: relative;
  background: #484848;
  height: 50%;
  width: 100%;
}
.content::before {
  position: absolute;
  content: "";
  display: block;
  width: 110%;
  height: 100%;
  left: -5%;
  top: -10%;
  transform: rotate(6.5deg) translateZ(0);
  background: #484848;
  z-index: 0;
}
.content > div {
  position: relative;
  z-index: 1;
}
.content > div.title {
  display: inline-block;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 0);
  font-size: 70px;
  line-height: 1;
}
</style>
</head>
<body>
  <div class="card">
  <div class="keyvisual"></div>
  <div class="content">
    <div class="title">
      MOVIE CARD
    </div>
  </div>
</div>
</body>
</html>

10. css-vue movie card slider

Made by mukie. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://unpkg.com/swiper/swiper-bundle.min.css'>
  
<style>
html,
body {
  position: relative;
  height: 100%;
  overflow:hidden;
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
  background: url(https://www.toptal.com/designers/subtlepatterns/patterns/cork-board.png);
}
.swiper-pagination-bullet{
  opacity: 0.5;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
  opacity: 1;
}

.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#app{
  width:600px;
  margin:30vh auto 0;
}

.movie-card {
    display: flex;
    padding: 20px;
    border-radius: 2rem;
    background: linear-gradient(90deg, #0B2E5C 0, #00032B 100%);/* W3C */
    box-shadow: 0 20px 20px rgba(0,0,0,0.3);
    height: 300px;
    cursor: pointer;
}

.movie-img-wrap{
  transform: translateY(-30%);
  padding:1rem;
}
.movie-img{
  max-height:360px;
}

.swiper-container {
    overflow: unset;
}

.swiper-slide {
    background: none;
}
.swiper-container-horizontal>.swiper-pagination-bullets{
  bottom: -50px;
}
.swiper-button-next, .swiper-button-prev{
  opacity:0;
  transition: .5s;
  color:#fff;
}
.swiper-container:hover .swiper-button-next,.swiper-container:hover  .swiper-button-prev{
  opacity:1;
}
.movie-info{
  color:#fff;
  text-align:left;
}
.movie-info h2, .movie-info p{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.movie-info h2{
  -webkit-line-clamp: 1;
  font-size:1.4rem;
}
.movie-info p{
  -webkit-line-clamp: 6;
  font-size:1rem;
  line-height:180%;
  opacity:0.5;
}

.movie-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 30px 30px rgba(0,0,0,0.5);
}
.movie-card:hover .movie-img-wrap{
  transform: translateY(-35%);
}
.movie-img-wrap img{
  border-radius:1rem;
}

.movie-card, .movie-img-wrap, .movie-img-wrap, .movie-img-wrap img,.more{
    transition: .5s;
}
.movie-card:hover .movie-img-wrap img{
  box-shadow: 0 30px 30px rgba(0,0,0,0.5);
  border-radius:0;
}
a.more {
    color: #ffb100;
    text-decoration: none;
    position: relative;
    opacity: 0;
}

a.more:after {content: '';position: absolute;width: 0;background: #ffb100;height: 1px;left: 0;bottom: -5px;transition: .5s;}

.movie-card:hover a.more:after {
    width: 120%;
}

.movie-card:hover a.more {
    opacity: 1;
}
</style>
</head>
<body>
  <div id="app"> 
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in imgArr" :key="item.image">
          <div class="movie-card">
            <div class="movie-img-wrap"><img :src="item.image" alt="" class="movie-img" /></div>
            <div class="movie-info">
              <h2>{{item.name}}</h2>
              <p>{{item.intro}}</p>
              <a href="javascript:;" class="more">More</a>
            </div>
          </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

<script src='https://unpkg.com/[email protected]'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js'></script>
<script src='https://unpkg.com/swiper/swiper-bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
      <script id="rendered-js" >
const { ref, onMounted, watch, nextTick } = Vue;
const App = {
  setup() {
    const imgArr = ref([]);
    let swiper = null;

    watch(imgArr, newVal => {
      nextTick(() => {
        swiper = new Swiper('.swiper-container', {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true },

          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev' } });


      });
    });

    onMounted(() => {
      axios.
      get(
      // "https://run.mocky.io/v3/f156226c-d630-4c62-8b09-929c527384fb"
      "https://run.mocky.io/v3/d5634117-9d0e-4698-8410-84740f5384a4").

      then(res => {
        imgArr.value = res.data.rows;
      });
    });
    return { imgArr };
  } };


Vue.createApp(App).mount('#app');

Mock.mock(/\.json/, {
  'list|1-10': [{
    'id|+1': 1,
    'email': '@EMAIL' }] });
    </script>
</body>
</html>

11. CSS Movie Cards with Cool animatins

Made by Alex Fernandez. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://www.youtube.com/iframe_api"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
<style>
html {
  box-sizing: border-box;
}

body {
  color: #676767;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  line-height: inherit;
}

.card-movie__details-list:after, .card-movie__details:after {
  clear: both;
  content: "";
  display: table;
}

.card-movie-wrapper {
  box-shadow: 0px 0px 100px 25px rgba(0, 0, 0, 0.2);
  height: 440px;
  position: relative;
  width: 840px;
}
.card-movie-wrapper:hover .card-movie-carousel {
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  bottom: 60px;
  right: 40px;
}

.card-movie-wrapper--centered {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  position: absolute;
  top: 50%;
}

.card-movie-carousel {
  -webkit-transition: all 250ms ease-in-out 250ms;
  -moz-transition: all 250ms ease-in-out 250ms;
  transition: all 250ms ease-in-out 250ms;
  height: 440px;
  width: 840px;
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.card-movie-navigation {
  background-color: #fff;
  bottom: 0;
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 15;
}
.card-movie-navigation__list {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
}
.card-movie-navigation__list li {
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  background-color: #ccc;
  border-radius: 100%;
  cursor: pointer;
  height: 12px;
  margin: 0 auto 6px;
  width: 12px;
}
.card-movie-navigation__list li:last-child {
  margin-bottom: 0;
}
.card-movie-navigation__list li.is-active {
  height: 18px;
  width: 18px;
}
.card-movie-navigation__list li:hover {
  background-color: #bbb;
}
.card-movie-navigation button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  bottom: 0;
  color: #aac8ca;
  cursor: pointer;
  font-size: 14px;
  line-height: 60px;
  margin: 0;
  outline: none;
  padding: 0;
  position: absolute;
  right: 40px;
}
.card-movie-navigation button:before {
  content: "Watch Trailer";
}
.card-movie-navigation button:after {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  border-bottom: 6px solid transparent;
  border-left: 6px solid #dce9e9;
  border-top: 6px solid transparent;
  content: "";
  height: 0;
  margin-right: 6px;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;
}
.card-movie-navigation button.is-playing:before {
  content: "Hide Trailer";
}
.card-movie-navigation button.is-playing:after {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  margin-top: -6px;
}

.card-movie {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: cover;
  bottom: 0;
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  opacity: 0;
  width: 100%;
  z-index: 20;
}
.card-movie__content {
  left: 330px;
  position: absolute;
  top: 150px;
}
.card-movie__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  margin-left: -4px;
  text-transform: uppercase;
}
.card-movie__details {
  margin-bottom: 30px;
  margin-top: 15px;
}
.card-movie__details-item {
  display: block;
  float: left;
  margin-right: 20px;
}
.card-movie__details-list li {
  float: left;
  margin-right: 5px;
  padding-right: 6px;
  position: relative;
}
.card-movie__details-list li:after {
  content: "|";
  position: absolute;
  right: 0;
}
.card-movie__details-list li:last-child {
  margin-right: 0;
}
.card-movie__details-list li:last-child:after {
  display: none;
}
.card-movie__description {
  font-size: 14px;
  max-width: 390px;
}
.card-movie__rating {
  bottom: 16.6666666667px;
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
  position: absolute;
  right: 16.6666666667px;
  text-align: center;
  width: 50px;
}
.card-movie__rating:after {
  border-radius: 100%;
  border: 2px solid #ee927b;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.card-movie__player {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  z-index: 20;
}
.card-movie--playing .card-movie__player {
  height: 440px;
  width: 840px;
}
.card-movie__player iframe {
  height: 100%;
  width: 100%;
}

.card-movie--active {
  opacity: 1;
  z-index: 25;
}

.card-movie--light {
  background-color: #effdfd;
}
.card-movie--light [class*=__title] {
  color: #000;
}

.card-movie--dark {
  background-color: #000;
  color: #fff;
}
.card-movie--dark [class*=__title] {
  color: #fff;
}

.card-movie--looper {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/looper.png");
}

.card-movie--tron {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/tron.png");
}

.card-movie--interstellar {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/interstellar.png");
  background-color: #fffffa;
}

.card-movie--garden-state {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/garden-state.png");
}

.card-movie--walter-mitty {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/walter-mitty.png");
}

.card-movie--cloud-atlas {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/43525/cloud-atlas.png");
}
</style>
</head>
<body>
  <div class="card-movie-wrapper card-movie-wrapper--centered">

  <div class="card-movie-carousel">

    <div class="card-movie card-movie--light card-movie--looper card-movie--active">

      <div class="card-movie__content">

        <div class="card-movie__title">Looper</div>

        <div class="card-movie__details">

          <span class="card-movie__details-item">2012</span>

          <span class="card-movie__details-item">119 mins</span>

          <ul class="card-movie__details-item card-movie__details-list">
            <li>Action</li>
            <li>Crime</li>
            <li>Sci-fi</li>
          </ul>

        </div>
        <!-- /.card-movie__details -->

        <div class="card-movie__description">

          <p>In 2074, when the mob wants to get rid of someone, the target is sent into the past, where a hired gun awaits&nbsp;-&nbsp;someone like Joe.</p>

        </div>
        <!-- /.card-movie__description -->

      </div>
      <!-- /.card-movie__content -->

      <div class="card-movie__rating">7.5</div>

      <div class="card-movie__player" data-trailer="5kGFyVKmqA0">

      </div>
      <!-- /.card-movie__player -->

    </div>
    <!-- /.card-movie card-movie--looper -->

    <div class="card-movie card-movie--dark card-movie--tron">

      <div class="card-movie__content">

        <div class="card-movie__title">Tron: Legacy</div>

        <div class="card-movie__details">

          <span class="card-movie__details-item">2010</span>

          <span class="card-movie__details-item">125 mins</span>

          <ul class="card-movie__details-item card-movie__details-list">
            <li>Action</li>
            <li>Adventure</li>
            <li>Fantasy</li>
            <li>Sci-fi</li>
          </ul>

        </div>
        <!-- /.card-movie__details -->

        <div class="card-movie__description">

          <p>The son of a virtual world designer goes looking for his father and ends up inside the digital world that his father designed. He meets his father's corrupted creation and a unique ally who was born inside the digital world.</p>

        </div>
        <!-- /.card-movie__description -->

      </div>
      <!-- /.card-movie__content -->

      <div class="card-movie__rating">6.8</div>

      <div class="card-movie__player" data-trailer="L9szn1QQfas">

      </div>
      <!-- /.card-movie__player -->

    </div>
    <!-- /.card-movie card-movie--tron -->

    <div class="card-movie card-movie--light card-movie--garden-state">

      <div class="card-movie__content">

        <div class="card-movie__title">Garden State</div>

        <div class="card-movie__details">

          <span class="card-movie__details-item">2004</span>

          <span class="card-movie__details-item">102 mins</span>

          <ul class="card-movie__details-item card-movie__details-list">
            <li>Comedy</li>
            <li>Drama</li>
            <li>Romance</li>
          </ul>

        </div>
        <!-- /.card-movie__details -->

        <div class="card-movie__description">

          <p>A quietly troubled young man returns home for his mother's funeral after being estranged from his family for a decade.</p>

        </div>
        <!-- /.card-movie__description -->

      </div>
      <!-- /.card-movie__content -->

      <div class="card-movie__rating">7.6</div>

      <div class="card-movie__player" data-trailer="u82n0e1mgmQ">

      </div>
      <!-- /.card-movie__player -->

    </div>
    <!-- /.card-movie card-movie--garden-state -->

    <div class="card-movie card-movie--light card-movie--interstellar">

      <div class="card-movie__content">

        <div class="card-movie__title">Interstellar</div>

        <div class="card-movie__details">

          <span class="card-movie__details-item">2014</span>

          <span class="card-movie__details-item">169 mins</span>

          <ul class="card-movie__details-item card-movie__details-list">
            <li>Adventure</li>
            <li>Drama</li>
            <li>Sci-fi</li>
          </ul>

        </div>
        <!-- /.card-movie__details -->

        <div class="card-movie__description">

          <p>With our time on Earth coming to an end, a team of explorers undertakes the most important mission in human history; traveling beyond this galaxy to discover whether mankind has a future among the stars.</p>

        </div>
        <!-- /.card-movie__description -->

      </div>
      <!-- /.card-movie__content -->

      <div class="card-movie__rating">8.7</div>

      <div class="card-movie__player" data-trailer="3WzHXI5HizQ">

      </div>
      <!-- /.card-movie__player -->

    </div>
    <!-- /.card-movie card-movie--interstellar -->

    <div class="card-movie card-movie--light card-movie--walter-mitty">

      <div class="card-movie__content">

        <div class="card-movie__title">Walter Mitty</div>

        <div class="card-movie__details">

          <span class="card-movie__details-item">2013</span>

          <span class="card-movie__details-item">114 mins</span>

          <ul class="card-movie__details-item card-movie__details-list">
            <li>Adventure</li>
            <li>Comedy</li>
            <li>Drama</li>
          </ul>

        </div>
        <!-- /.card-movie__details -->

        <div class="card-movie__description">

          <p>When his job along with that of his co-worker are threatened, Walter takes action in the real world embarking on a global journey that turns into an adventure more extraordinary than anything he could have ever imagined.</p>

        </div>
        <!-- /.card-movie__description -->

      </div>
      <!-- /.card-movie__content -->

      <div class="card-movie__rating">7.4</div>

      <div class="card-movie__player" data-trailer="QD6cy4PBQPI">

      </div>
      <!-- /.card-movie__player -->

    </div>
    <!-- /.card-movie card-movie--walter-mitty -->

    <div class="card-movie card-movie--dark card-movie--cloud-atlas">

      <div class="card-movie__content">

        <div class="card-movie__title">Cloud Atlas</div>

        <div class="card-movie__details">

          <span class="card-movie__details-item">2012</span>

          <span class="card-movie__details-item">172 mins</span>

          <ul class="card-movie__details-item card-movie__details-list">
            <li>Drama</li>
            <li>Sci-Fi</li>
          </ul>

        </div>
        <!-- /.card-movie__details -->

        <div class="card-movie__description">

          <p>An exploration of how the actions of individual lives impact one another in the past, present and future, as one soul is shaped from a killer into a hero, and an act of kindness ripples across centuries to inspire a revolution.</p>

        </div>
        <!-- /.card-movie__description -->

      </div>
      <!-- /.card-movie__content -->

      <div class="card-movie__rating">7.5</div>

      <div class="card-movie__player" data-trailer="hWnAqFyaQ5s">

      </div>
      <!-- /.card-movie__player -->

    </div>
    <!-- /.card-movie card-movie--cloud-atlas -->

  </div>
  <!-- /.card-movie-carousel -->

  <div class="card-movie-navigation">

    <ul class="card-movie-navigation__list" data-navigation>
      <li class="is-active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- /.card-movie-navigation__list -->

    <button type="button" data-play></button>

  </div>
  <!-- /.card-movie-navigation -->

</div>
<!-- /.card-movie-wrapper -->
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
// global vars
var players = [],
current = 0;

// YouTube iFrame API Ready
function onYouTubeIframeAPIReady() {

  $('[data-trailer]').each(function () {

    var player,
    id = $(this).data('trailer');

    $(this).html('<iframe id="player_' + id + '" src="https://www.youtube.com/embed/' + id + '?enablejsapi=1&autohide=1&showinfo=0&theme=light" frameborder="0" allowfullscreen></iframe>');

    player = new YT.Player('player_' + id, {
      events: {
        'onStateChange': onPlayerStateChange } });



    players.push(player);

  });

}

// YouTube On Player State Change
function onPlayerStateChange(event) {

  var player = players[current];

  switch (event.data) {

    case YT.PlayerState.ENDED:
      player.stopVideo();
      player.seekTo(0);
      $('.card-movie--playing').removeClass('card-movie--playing');
      $('[data-play]').removeClass('is-playing');
      ;break;}



}

$(function () {

  $('[data-play]').on('click', function () {

    var $card = $('.card-movie--active'),
    player = players[$card.index()];

    if ($card.hasClass('card-movie--playing')) {
      $(this).toggleClass('is-playing');
      player.pauseVideo();
    } else {
      $(this).toggleClass('is-playing');
      player.playVideo();
    }

    $card.toggleClass('card-movie--playing');

  });

  $('[data-navigation] li').on('click', function () {

    // remove current stuff
    players[current].pauseVideo();
    $('.card-movie:eq(' + current + ')').removeClass('card-movie--playing card-movie--active');
    $('[data-play]').removeClass('is-playing');
    // assign new current
    current = $(this).index();
    $(this).addClass('is-active').siblings().removeClass('is-active');
    $('.card-movie:eq(' + current + ')').addClass('card-movie--active');

  });

});
    </script>
</body>
</html>

12. Responsive movie card

Made by Ryan Parag. Simple responsive movie cards. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800");
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #dce1e5;
  font-family: "Montserrat", helvetica, arial, sans-serif;
  font-size: 14px;
  color: #cfd6e1;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
}

* {
  transition: 0.4s;
}

a {
  text-decoration: none;
}

button {
  font-family: inherit;
  border: 0;
  cursor: pointer;
}
button:focus {
  outline: 0;
}

.movie-card {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 800px;
  height: 100%;
  min-height: 300px;
  display: block;
  margin: 8vh auto;
  border-radius: 8px;
  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.25);
  position: relative;
}
@media screen and (max-width: 800px) {
  .movie-card {
    width: 95%;
    max-width: 95%;
  }
}
@media screen and (max-width: 600px) {
  .movie-card {
    background-position: 50% 0%;
    background-size: cover;
    height: 400px;
  }
}
.movie-card[data-movie="Blade Runner"] {
  background-image: url(http://digitalspyuk.cdnds.net/15/47/1600x800/landscape-1447754794-harrison-ford-blade-runner.jpg);
}
.movie-card[data-movie="Back to the Future"] {
  background-image: url("http://www.blastr.com/sites/blastr/files/back-to-the-future-part-ii-original.jpg");
}
.movie-card[data-movie=Akira] {
  background-image: url("https://static1.squarespace.com/static/51b3dc8ee4b051b96ceb10de/t/58d86b3db3db2b57ce8f2986/1490578241899/?format=2500w");
}
.movie-card__overlay {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(to right, rgba(42, 159, 255, 0.2) 0%, #212120 60%, #212120 100%);
  background-blend-mode: multiply;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
@media screen and (max-width: 600px) {
  .movie-card__overlay {
    background: linear-gradient(to bottom, rgba(42, 159, 255, 0.2) 0%, #212120 60%, #212120 100%);
  }
}
.movie-card__share {
  padding: 1em;
  display: inline-block;
  width: 100%;
  max-width: 130px;
}
@media screen and (max-width: 600px) {
  .movie-card__share {
    display: block;
    width: 100%;
  }
}
.movie-card__icon {
  color: #ffffff;
  mix-blend-mode: lighten;
  opacity: 0.4;
  background: none;
  padding: 0;
}
.movie-card__icon:hover {
  opacity: 1;
  mix-blend-mode: lighten;
}
.movie-card__icon:not(:first-of-type) {
  margin-left: 5px;
}
.movie-card__icon i {
  font-size: 1.2em;
}
.movie-card__content {
  width: 100%;
  max-width: 370px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  float: right;
  padding-right: 1.2em;
  padding-bottom: 1em;
}
@media screen and (max-width: 1000px) {
  .movie-card__content {
    width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .movie-card__content {
    margin-top: 4.2em;
    width: 100%;
    float: inherit;
    max-width: 100%;
    padding: 0 1em 1em;
  }
}
.movie-card__header {
  margin-bottom: 2em;
}
.movie-card__title {
  color: #ffffff;
  margin-bottom: 0.25em;
  opacity: 0.75;
}
.movie-card__info {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8em;
  color: #2a9fff;
  line-height: 1;
  margin: 0;
  font-weight: 700;
  opacity: 0.5;
}
.movie-card__desc {
  font-weight: 300;
  opacity: 0.84;
  margin-bottom: 2em;
}

h1, h2, h3 {
  font-family: "Montserrat", helvetica, arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
  font-weight: 400;
}

.btn {
  padding: 0.5rem 2rem;
  background-color: rgba(255, 255, 255, 0.4);
  color: white;
}

.btn-outline {
  background-color: transparent;
  border: 3px solid #ffffff;
}

.btn::before {
  font-family: "Material Icons";
  content: "ξ€·";
  vertical-align: middle;
  font-size: 1.5em;
  padding-right: 0.5em;
}

.btn-outline:hover {
  border-color: #2a9fff;
  color: #2a9fff;
  box-shadow: 0px 1px 8px 0px rgba(245, 199, 0, 0.2);
}
</style>
</head>
<body>
  <div id="movie-card-list">
  <div class="movie-card" data-movie="Blade Runner">
    <div class="movie-card__overlay"></div>
    <div class="movie-card__share">
      <button class="movie-card__icon"><i class="material-icons">&#xe87d</i></button>
      <button class="movie-card__icon"><i class="material-icons">&#xe253</i></button>
      <button class="movie-card__icon"><i class="material-icons">&#xe80d</i></button>
    </div>
    <div class="movie-card__content">
      <div class="movie-card__header">
        <h1 class="movie-card__title">Blade Runner</h1>
        <h4 class="movie-card__info">(1982) Sci-Fi, Thriller</h4>
      </div>
      <p class="movie-card__desc">A blade runner must pursue and try to terminate four replicants who stole a ship in space and have returned to Earth to find their creator.</p>
      <button class="btn btn-outline movie-card__button" type="button">Watch Trailer</button>
    </div>
  </div>
  <div class="movie-card" data-movie="Back to the Future">
    <div class="movie-card__overlay"></div>
    <div class="movie-card__share">
      <button class="movie-card__icon"><i class="material-icons">&#xe87d</i></button>
      <button class="movie-card__icon"><i class="material-icons">&#xe253</i></button>
      <button class="movie-card__icon"><i class="material-icons">&#xe80d</i></button>
    </div>
    <div class="movie-card__content">
      <div class="movie-card__header">
        <h1 class="movie-card__title">Back to the Future</h1>
        <h4 class="movie-card__info">(1985) Adventure, Comedy, Sci-Fi</h4>
      </div>
      <p class="movie-card__desc">Marty McFly, a 17-year-old high school student, is accidentally sent 30 years into the past in a time-traveling DeLorean invented by his close friend, the maverick scientist Doc Brown.</p>
      <button class="btn btn-outline movie-card__button" type="button">Watch Trailer</button>
    </div>
  </div>
  <div class="movie-card" data-movie="Akira">
    <div class="movie-card__overlay"></div>
    <div class="movie-card__share">
      <button class="movie-card__icon"><i class="material-icons">&#xe87d</i></button>
      <button class="movie-card__icon"><i class="material-icons">&#xe253</i></button>
      <button class="movie-card__icon"><i class="material-icons">&#xe80d</i></button>
    </div>
    <div class="movie-card__content">
      <div class="movie-card__header">
        <h1 class="movie-card__title">Akira</h1>
        <h4 class="movie-card__info">(1988) Animation, Action, Drama</h4>
      </div>
      <p class="movie-card__desc">A secret military project endangers Neo-Tokyo when it turns a biker gang member into a rampaging psychic psychopath that only two teenagers and a group of psychics can stop.</p>
      <button class="btn btn-outline movie-card__button" type="button">Watch Trailer</button>
    </div>
  </div>
</div>
</body>
</html>

13. Simple Movie card

Made by George Mironidis. Simple Movie card without any effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800,300italic,400italic,600italic,700italic,800italic);
body {
  background: linear-gradient(rgba(30, 27, 38, 0.95), rgba(30, 27, 38, 0.95)), url("https://i.ibb.co/FDGqCmM/papers-co-ag74-interstellar-wide-space-film-movie-art-33-iphone6-wallpaper.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
}

.container {
  width: 100%;
  height: 100%;
}

.cellphone-container {
  width: 375px;
  height: 650px;
  background-color: #1e1b26;
  margin: 60px auto 0 auto;
  box-shadow: 5px 5px 115px -14px black;
  border-radius: 4px;
}

.menu {
  position: absolute;
  right: 12px;
  top: 6px;
  z-index: 999;
}
.menu i {
  font-size: 40px;
  color: #fe4141;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
}

.movie-img {
  width: 100%;
  height: 380px;
  background-image: url(https://i.ibb.co/FDGqCmM/papers-co-ag74-interstellar-wide-space-film-movie-art-33-iphone6-wallpaper.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 111 !important;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, black), color-stop(0.35, black), color-stop(0.5, black), color-stop(0.65, black), color-stop(0.85, rgba(0, 0, 0, 0.6)), color-stop(1, transparent));
  position: relative;
}

.movie {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+39,1e1b26+53&0+38,1+55 */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.06) 39%, rgba(30, 27, 38, 0.88) 53%, #1e1b26 55%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.06) 39%, rgba(30, 27, 38, 0.88) 53%, #1e1b26 55%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.06) 39%, rgba(30, 27, 38, 0.88) 53%, #1e1b26 55%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1e1b26',GradientType=0 );
  /* IE6-9 */
  position: absolute;
  background-size: contain;
  background-size: cover;
  z-index: 1 !important;
  width: 375px;
  height: 660px;
  display: block;
  border-radius: 4px;
}

.text-movie-cont {
  padding: 0px 12px;
  text-align: justify;
}

.action-btn {
  text-align: right;
}
.action-btn i {
  color: #fe4141;
  font-size: 28px;
  text-align: right;
}

.watch-btn {
  display: block;
  border: 1px solid #fe4141;
  border-radius: 5px;
  padding: 4px;
  width: 140px;
}
.watch-btn h3 i {
  font-size: 14px;
  margin-right: 2px;
  position: relative;
  float: left;
  line-height: 1;
}

.action-row {
  margin-top: 24px;
}

.summary-row {
  margin-top: 12px;
}

/* TYPOGRAPHY STARTS */
/* Fonts */
h1, h2, h3, h4, h5 {
  font-family: "Montserrat", sans-serif;
  color: #e7e7e7;
  margin: 0px;
}

h1 {
  font-size: 36px;
  font-weight: 400;
}

h3 {
  font-size: 14px;
  font-weight: 400;
  color: #fe4141;
}

h5 {
  font-size: 12px;
  font-weight: 400;
}

.movie-gen, .movie-likes {
  margin: 0px;
  padding: 0px;
}
.movie-gen li, .movie-likes li {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  color: #818181;
  width: auto;
  display: block;
  float: left;
  margin-right: 6px;
  font-weight: 600;
}

.movie-likes {
  float: right;
}
.movie-likes li {
  color: #fe4141;
}
.movie-likes li:last-child {
  margin-right: 0px;
}
.movie-likes li i {
  font-size: 14px;
  margin-right: 4px;
  position: relative;
  float: left;
  line-height: 1;
}

.movie-details {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #b4b4b4;
}

.movie-description {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9b9b9b;
  text-align: justify;
  line-height: 1.3;
}

.movie-actors {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #e7e7e7;
  font-style: italic;
}

/* TYPOGRAPHY ENDS */
/** GRID STARTS **/
.thegrid {
  margin: 0 auto;
}

.elements-distance, .movie-details, .movie-description, .movie-actors {
  margin: 0px;
}

.mr-grid {
  width: 100%;
}

.mr-grid:before, .mr-grid:after {
  content: "";
  display: table;
}

.mr-grid:after {
  clear: both;
}

.mr-grid {
  *zoom: 1;
}

.col1, .col2, .col3, .col3rest, .col4, .col4rest, .col5, .col5rest, .col6, .col6rest {
  margin: 0% 0.5% 0.5% 0.5%;
  padding: 1%;
  float: left;
  display: block;
}

/* Columns match, minus margin sum. E.G. margin-left+margin-right=1%, col2=50%-1% - added padding:1%*/
.col1 {
  width: 98%;
}

.col2 {
  width: 47%;
}

.col3 {
  width: 30.3333333333%;
}

.col4 {
  width: 22%;
}

.col5 {
  width: 17%;
}

.col6 {
  width: 13.6666666667%;
}

/* Columns match with their individual number. E.G. col3+col3rest=full width row */
.col3rest {
  width: 63.6666666667%;
}

.col4rest {
  width: 72%;
}

.col5rest {
  width: 77%;
}

.col6rest {
  width: 80.3333333333%;
}

.dribbble-link {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 15px;
  right: 15px;
  border-radius: 50px;
}
</style>
</head>
<body>
  <div class="container">
  <div class="cellphone-container">    
      <div class="movie">       
        <div class="menu"><i class="material-icons">ξ…€</i></div>
        <div class="movie-img"></div>
        <div class="text-movie-cont">
          <div class="mr-grid">
            <div class="col1">
              <h1>Interstellar</h1>
              <ul class="movie-gen">
                <li>PG-13  /</li>
                <li>2h 49min  /</li>
                <li>Adventure, Drama, Sci-Fi,</li>
              </ul>
            </div>
          </div>
          <div class="mr-grid summary-row">
            <div class="col2">
              <h5>SUMMARY</h5>
            </div>
            <div class="col2">
               <ul class="movie-likes">
                <li><i class="material-icons">&#xE813;</i>124</li>
                <li><i class="material-icons">&#xE813;</i>3</li>
              </ul>
            </div>
          </div>
          <div class="mr-grid">
            <div class="col1">
              <p class="movie-description">A group of elderly people are giving interviews about having lived in a climate of crop blight and constant dust reminiscent of The Great 
              Depression of the 1930's. The first one seen is an elderly woman stating her father was a farmer, but did not start out that way. </p>
            </div>
          </div>
          <div class="mr-grid actors-row">
            <div class="col1">
              <p class="movie-actors">Matthew McConaughey, Anne Hathaway, Jessica Chastain</p>
            </div>
          </div>
          <div class="mr-grid action-row">
            <div class="col2"><div class="watch-btn"><h3><i class="material-icons">&#xE037;</i>WATCH TRAILER</h3></div>
            </div>
            <div class="col6 action-btn"><i class="material-icons">&#xE161;</i>
            </div>
            <div class="col6 action-btn"><i class="material-icons">&#xE866;</i>
            </div>
            <div class="col6 action-btn"><i class="material-icons">&#xE80D;</i>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>
<a href="https://dribbble.com/geehm" target="_blank">
  <img class="dribbble-link" src="https://image.flaticon.com/icons/png/512/124/124037.png">
</a>
</body>
</html>

14. Movie cards with no effects

Made by Akshaykumar. Movie cards with no effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans|Lobster|Montserrat|Roboto');
body{
  font-family: arial;
  padding: 0;
  background: #e8e8e8;
}

.movie-card{
  width: 70%;
  margin:auto;
  padding: 20px 30px 20px 15px;
  border-radius: 10px;
  background-blend-mode: multiply;
  position: relative;
  margin-bottom: 20px;
  z-index: 1;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);
  transition: all 0.5s ease;
}
.movie-card:nth-child(1){
  background-image: url('http://i.imgur.com/VDxMxy9.jpg');
  background-position: center;
  background-size: cover;
}
.movie-card:nth-child(2){
  background-image: url('https://i.imgur.com/C4jET4Q.jpg');
  background-position: center;
  background-size: cover;
}
.movie-card:nth-child(3){
  background-image: url('https://i.imgur.com/Zetlod6.jpg');
  background-position: center;
  background-size: cover;
}
.card-overlay {
    background: linear-gradient(to right, rgba(42, 159, 255, 0.2) 0%, #212120 60%, #212120 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 10px;
}
.card{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-end;
}
.movie-card-description{
  width: 400px;
  color: #fff;
}
.movie-title{
  margin: 0;
  font-family: Montserrat;
}
.movie-subtitle{
  margin-top: 5px;
  font-family: Lobster;
}
.movie-shorts{
  font-family: Roboto;
  text-align: justify;
}

.watch-btn{
  width: 200px;
  font-family: Fira Sans;
  margin: auto;
  padding: 10px;
  border: 1px solid #fff;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
  color: #fff;
  transition: all 0.5s ease;
}

.watch-btn:hover{
  color: #f00;
  border: 1px solid #f00;
}

.card-share{
  position: absolute;
}
.share-link {
    text-decoration: none;
    color: #e3e3e3;
    margin: 5px;
}

@media screen and (max-width: 768px){
  .movie-card{
    width: 90%;
    box-sizing: border-box;
    padding: 20px;
  }
  .card{
    flex-direction: row;
  }
  .card-overlay {
    background: linear-gradient(to bottom, rgba(42, 159, 255, 0.2) 0%, #212120 60%, #212120 100%);
  }
  .card-share{
    position: relative;
  }
}
</style>
</head>
<body>
  <div class="movie-card">
    <div class="card-overlay"></div>
   <div class="card-share">
      <a class="share-link" href="#">
        <i class="fa fa-heart" aria-hidden="true"></i>
      </a>
      <a class="share-link" href="#">
        <i class="fa fa-comment" aria-hidden="true"></i>
      </a>
        <a class="share-link" href="#">
        <i class="fa fa-share-alt" aria-hidden="true"></i>
      </a>
    </div>
   <div class="card">
     <div class="movie-card-description">
      <h1 class="movie-title">Fairy Tail</h1>
       <p class="movie-subtitle">(2006) Adventure fiction, Fantasy</p>
       <p class="movie-shorts">Fairy Tail is set in Earth-land, a fictional land where wizards coalesce into guilds to apply their magical abilities for paid job requests. Novice wizard Lucy Heartfilia runs away from home to join Fairy Tail, a guild famous for its members' overly destructive antics.</p>
       <button type="button" class="watch-btn"><i class="fa fa-play" aria-hidden="true"></i> &emsp; Watch Trailer</button>
     </div>
   </div>
  </div>

  <div class="movie-card">
    <div class="card-overlay"></div>
    <div class="card-share">
      <a class="share-link" href="#">
        <i class="fa fa-heart" aria-hidden="true"></i>
      </a>
      <a class="share-link" href="#">
        <i class="fa fa-comment" aria-hidden="true"></i>
      </a>
        <a class="share-link" href="#">
        <i class="fa fa-share-alt" aria-hidden="true"></i>
      </a>
    </div>
    <div class="card">
      <div class="movie-card-description">
        <h1 class="movie-title">Code Geass</h1>
        <p class="movie-subtitle">(2006) Visual novel, Adventure fiction, Science Fiction</p>
        <p class="movie-shorts">The Holy Empire of Britannia conquered the country known as Japan and now call it Area 11. Its residents lost their rights to self-govern and are now called Elevens.</p>
        <button type="button" class="watch-btn"><i class="fa fa-play" aria-hidden="true"></i> &emsp; Watch Trailer</button>
      </div>
    </div>
  </div>

  <div class="movie-card">
    <div class="card-overlay"></div>
    <div class="card-share">
      <a class="share-link" href="#">
        <i class="fa fa-heart" aria-hidden="true"></i>
      </a>
      <a class="share-link" href="#">
        <i class="fa fa-comment" aria-hidden="true"></i>
      </a>
        <a class="share-link" href="#">
        <i class="fa fa-share-alt" aria-hidden="true"></i>
      </a>
    </div>
    <div class="card">
      <div class="movie-card-description">
        <h1 class="movie-title">Naruto</h1>
        <p class="movie-subtitle">(2002) Adventure fiction, Comedy, Fantasy</p>
        <p class="movie-shorts">A powerful fox known as the Nine-Tails attacks Konoha, the hidden leaf village in the Land of Fire, one of the Five Great Shinobi Countries in the Ninja World. In response, the leader of Konoha, the Fourth Hokage, seals the fox inside the body of his newborn son, Naruto Uzumaki, making Naruto a host of the beast</p>
        <button type="button" class="watch-btn"><i class="fa fa-play" aria-hidden="true"></i> &emsp; Watch Trailer</button>
      </div>
    </div>
  </div>
</body>
</html>

15. Movie card with sliding animation

Made by Eoin Fanning. Movie card with sliding animation, click the movie poster to open its trailer video. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  background: #B5B5B5;
}

.moviecard {
  font-family: "Helvetica", sans-serif, "Ariel";
  position: relative;
  background: #ffffff;
  color: #555555;
  margin: 50px auto;
  width: 850px;
  max-width: 900px;
  min-height: 300px;
  padding: 30px 290px 30px 30px;
  -moz-box-shadow: -5px 5px 15px;
  -webkit-box-shadow: -5px 5px 15px;
  box-shadow: -5px 5px 15px;
  border-radius: 5px;
}
.moviecard #movie-content {
  opacity: 1;
  width: 100%;
  display: table;
  transition: all 500ms ease-out;
  position: relative;
}
.moviecard .movie-title {
  font-size: 36px;
  padding-bottom: 6px;
  color: #333333;
}
.moviecard .movie-title .movie-year {
  margin-left: 12px;
  font-size: 16px;
}
.moviecard .movie-title a {
  color: #333333;
  text-decoration: none;
}
.moviecard .movie-title a:hover {
  color: #858585;
}
.moviecard .movie-details {
  font-size: 12px;
  padding-bottom: 24px;
  margin-bottom: 12px;
  border-bottom: 1px solid #dbdbdb;
}
.moviecard .movie-details span {
  padding: 0px 6px;
  border-right: 1px solid #dbdbdb;
}
.moviecard .movie-details span:last-child {
  border: none;
}
.moviecard .movie-castcrew {
  padding-top: 12px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.moviecard .movie-castcrew span.title {
  color: #333333;
  display: inline-block;
  width: 80px;
  font-weight: 600;
}
.moviecard .movie-synopsis {
  margin: 24px 0px;
  padding-top: 24px;
  border-top: 1px solid #dbdbdb;
  max-height: 130px;
  height: 130px;
  overflow-y: hidden;
  width: 100%;
}
.moviecard .movie-ratings {
  position: absolute;
  right: 0px;
}
.moviecard .movie-ratings span.star {
  display: inline-block;
  margin-right: 12px;
  color: #F0DE00;
  font-size: 36px;
}
.moviecard .movie-ratings span.score {
  font-size: 30px;
  color: #333333;
}
.moviecard .movie-trailer-btn {
  text-transform: uppercase;
  outline: none;
  padding: 15px 50px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}
.moviecard .movie-trailer-btn:hover {
  text-decoration: underline;
}
.moviecard .movie-trailer-btn:hover:before {
  color: #333333;
}
.moviecard .movie-trailer-btn:hover:after {
  border-color: #333333;
}
.moviecard .movie-trailer-btn:before {
  content: "β–Έ";
  font-size: 30px;
  color: #333333;
  position: absolute;
  top: 2px;
  left: 18px;
  width: 22px;
}
.moviecard .movie-trailer-btn:after {
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid #333333;
  border-radius: 50%;
  position: absolute;
  left: 18px;
  top: 12px;
}
.moviecard .movie-trailer {
  width: 0px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0px;
  height: 100%;
  transition: all 500ms;
  top: 0px;
  background: #ffffff;
  z-index: 1;
  padding: 60px 40px 60px 60px;
  border-radius: 5px;
}
.moviecard .movie-trailer a.back-btn {
  color: #333333;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px 6px 18px;
  position: absolute;
  top: 12px;
  left: 300px;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
}
.moviecard .movie-trailer a.back-btn:before {
  content: "⌜";
  position: absolute;
  left: 5px;
  top: -2px;
  transform: rotate(-45deg);
  font-size: 20px;
  width: 26px;
  height: 26px;
}
.moviecard .movie-trailer a.back-btn:hover {
  color: #333;
}
.moviecard .movie-trailer iframe {
  width: 100%;
  height: 100%;
}
.moviecard .movie-poster {
  position: absolute;
  background: url("http://www.pulpcurry.com/wp-content/uploads/2015/09/Sicario.jpg");
  background-color: #dbdbdb;
  background-size: 360px 540px;
  background-repeat: no-repeat;
  height: 0;
  width: 360px;
  height: 540px;
  right: -100px;
  top: -20px;
  -moz-box-shadow: -2px 2px 7px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: -2px 2px 7px rgba(0, 0, 0, 0.6);
  box-shadow: -2px 2px 7px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 500ms ease-out;
  z-index: 10;
}
.moviecard .movie-poster:before {
  content: "β–Έ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  color: rgba(255, 255, 255, 0.4);
}
.moviecard .movie-poster:hover:before {
  color: rgba(255, 255, 255, 0.8);
}
.moviecard.movie-view-trailer .movie-poster {
  right: 600px;
}
.moviecard.movie-view-trailer #movie-content {
  opacity: 0;
  width: 0px;
}
.moviecard.movie-view-trailer .movie-trailer {
  width: 100%;
  opacity: 1;
  padding-left: 300px;
}
.moviecard.movie-view-trailer .movie-trailer #youvideo {
  height: 100%;
}
</style>
</head>
<body>
  <div class="moviecard">
  <div class="movie-poster play-trailer"></div>
  <div id="movie-content">
    <div class="movie-ratings"><span class="star">β˜…</span><span class="score">7.7</span><span class="score-out-of">/ 10 (IMDB)</span></div>
    <div class="movie-title"><a href="https://www.imdb.com/title/tt3397884" target="_blank">Sicario</a><span class="movie-year">2015</span></div>
    <div class="movie-details"><span class="movie-rating">R</span><span class="movie-duration">2h 1min</span><span class="movie-genre">Action, Crime, Drama</span></div>
    <div class="movie-castcrew"><span class="title">Director</span><span class="name">Denis Villeneuve</span></div>
    <div class="movie-castcrew"><span class="title">Writer</span><span class="name">Taylor Sheridan</span></div>
    <div class="movie-castcrew"><span class="title">Cast</span><span class="name">Emily Blunt, Josh Brolin, Benicio Del Toro</span></div>
    <div class="movie-synopsis">An idealistic FBI agent is enlisted by a government task force to aid in the escalating war against drugs at the border area between the U.S. and Mexico.</div>
    <button class="movie-trailer-btn play-trailer" type="button">play trailer</button>
  </div>
  <div class="movie-trailer"><a class="back-btn">back</a>
    <div id="youvideo">
      <iframe src="https://www.youtube.com/embed/7XLQ1bkSLDo?enablejsapi=1" frameborder="0" allowfullscreen="allowfullscreen" allowScriptAccess="always"></iframe>
    </div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
      <script id="rendered-js" >
$(document).ready(function () {
  $(".play-trailer").click(function () {
    toggleVideo('show');
    $(".moviecard").addClass("movie-view-trailer");
  });

  $(".back-btn").click(function () {
    $(".moviecard").removeClass("movie-view-trailer");
    toggleVideo('hide');
  });
});

function toggleVideo(state) {
  // if state == 'hide', hide. Else: show video
  var div = document.getElementById("youvideo");
  var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
  div.style.display = state == 'hide' ? 'none' : '';
  func = state == 'hide' ? 'pauseVideo' : 'playVideo';
  iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
    </script>
</body>
</html>

16. Dynamic css movie card

Made by Ryan Mulligan. Dynamic css movie card where you can just enter the name of a movie to get its details and poster. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:400,900");
* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 100vh;
  font-family: "Lato", sans-serif;
  background-color: whitesmoke;
}

h1, h2, p, ul {
  line-height: 1.2;
}
h1:not(:last-child), h2:not(:last-child), p:not(:last-child), ul:not(:last-child) {
  margin-bottom: 12px;
}

p, li {
  font-size: 0.9em;
  line-height: 1.5;
}

p + ul {
  margin-top: -10px;
}

h1, h2, strong {
  font-weight: 900;
}

input {
  padding: 6px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  border: 1px solid gainsboro;
  border-radius: 2px;
  -webkit-appearance: none;
}

.list--inline li {
  display: inline-block;
}
.list--inline li:not(:last-child) {
  margin-right: 12px;
}

.movie {
  position: relative;
  overflow: hidden;
  margin: 12px auto;
  width: 100%;
  max-width: 800px;
  background-color: white;
  border-radius: 0.8em;
  box-shadow: rgba(0, 0, 0, 0.2) 0 30px 18px -24px;
}
.movie__data {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
}
@media (min-width: 600px) {
  .movie__data {
    flex-direction: row;
  }
}
.movie__search {
  position: absolute;
  top: 24px;
  right: 24px;
  margin: auto;
  width: calc(100% - (12px * 4));
}
@media (min-width: 400px) {
  .movie__search {
    max-width: 200px;
  }
}
.movie__tags {
  font-size: 0.75em;
  color: darkgray;
}
.movie__poster {
  position: relative;
  display: flex;
  width: 100%;
}
@media (min-width: 600px) {
  .movie__poster {
    margin-right: 12px;
    width: 200px;
  }
}
.movie__poster--fill {
  position: absolute;
  overflow: hidden;
  top: -80%;
  bottom: -20%;
  left: -20%;
  width: 150%;
  height: 150%;
  transform: rotate(5deg);
}
@media (min-width: 600px) {
  .movie__poster--fill {
    top: -20%;
    width: 100%;
  }
}
.movie__poster--fill img {
  filter: blur(6px);
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1.4);
}
.movie__poster--featured {
  position: relative;
  align-self: center;
  overflow: hidden;
  margin-top: 84px;
  margin-left: 24px;
  width: 140px;
  background-color: gainsboro;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.6) 0 6px 12px -6px;
  z-index: 1;
}
@media (min-width: 600px) {
  .movie__poster--featured {
    left: 56px;
    margin: auto;
  }
}
.movie__poster--featured img {
  width: 140px;
  vertical-align: middle;
}
.movie__poster--featured img[src="N/A"] {
  min-height: 206px;
  opacity: 0;
}
.movie__details {
  flex: 1;
  padding: 24px;
}
@media (min-width: 600px) {
  .movie__details {
    padding: 72px;
  }
}
.movie__title {
  font-family: "Lato", sans-serif;
  font-size: 2em;
}
.movie__no-results {
  align-self: center;
  justify-self: center;
  width: 100%;
  text-align: center;
}
</style>
</head>
<body>
  <div class="movie" id="movie-card">
  <div class="movie__data" id="movie-data"></div>
  <input class="movie__search" id="movie-search" type="text" placeholder="Enter a movie title"/>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script id="rendered-js" >
const movieData = document.getElementById('movie-data');
const input = document.getElementById('movie-search');
const key = '2fb7569a';
const defaultTitle = 'dead+poets+society';
const url = `https://www.omdbapi.com/?apikey=${key}&t=`;

const movieDataTpl = movie => {
  let actors = movie.Actors.split(',');

  return `
    <div class="movie__poster">
      <span class="movie__poster--fill">
        <img src="${movie.Poster}" />
      </span>
      <span class="movie__poster--featured">
        <img src="${movie.Poster}" />
      </span>
    </div>
    <div class="movie__details">
      <h2 class="movie__title">${movie.Title}</h2>
      <ul class="movie__tags list--inline">
        <li class="movie__rated">${movie.Rated}</li>
        <li class="movie__year">${movie.Year}</li>
        <li class="movie__year">${movie.Genre}</li>
      </ul>
      <p class="movie__plot">${movie.Plot}</p>
      <div class="movie__credits">
        <p><strong>Written by:</strong> ${movie.Writer}</p>
        <p><strong>Directed by:</strong> ${movie.Director}</p>
        <p><strong>Starring:</strong></p>
        <ul class="movie__actors list--inline">
          ${actors.map(actor => `<li>${actor}</li>`).join('')}
        </ul>
      </div>
    </div>
  `;
};

const noResultsTpl = () => {
  return `
    <div class="movie__no-results">
      <h2>No results</div>
    </div>
  `;
};

const findMovie = title => {
  fetch(url + title, {
    method: 'get' }).
  then(function (res) {
    return res.json();
  }).then(function (data) {
    movieData.innerHTML = movieDataTpl(data);
  }).catch(function (err) {
    movieData.innerHTML = noResultsTpl();
  });
};

findMovie(defaultTitle);

input.addEventListener('keypress', e => {
  if (e.keyCode === 13 && input.value) findMovie(input.value);
});
    </script>
</body>
</html>

17. Movie Card | CSS

Made by HΓ₯vard Brynjulfsen. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  line-height: 1.6;
  background: #eee;
}

.container {
  display: block;
  width: 375px;
  height: 677px;
  background: #ffffff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
  padding: 70px 30px 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.container:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 200px;
  background: red;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(130deg, #e67e22 10%, #e74c3c 100%);
}

.poster {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 1px 0 10px 0 rgba(0, 0, 0, 0.2);
}
.poster__img {
  height: 200px;
  background: url("http://cdn1-www.comingsoon.net/assets/uploads/gallery/angry-birds-1412173620/angrybirdsmovie0004.jpg");
  background-position: center;
  background-size: cover;
  width: 100%;
}
.poster__info {
  background: #fff;
  padding: 25px 25px 40px;
}
.poster__title {
  font-size: 1.2em;
  font-weight: 300;
  margin-bottom: 0.4em;
}
.poster__text {
  font-size: 0.9em;
  color: #999;
  font-weight: 300;
}

a {
  display: block;
  width: 250px;
  background: #27ae60;
  text-align: center;
  margin: 30px auto;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 300;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: 0.3s;
}
a:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.18);
}
</style>
</head>
<body>
  <div class="container">
  <div class="poster">
    <div class="poster__img"></div>
    <div class="poster__info">
      <h1 class="poster__title">Angry Birds</h1>
      <p class="poster__text">Find out why the birds are so angry. When an island populated by happy, flightless birds is visited by mysterious green piggies, it's up to three unlikely outcasts - Red, Chuck and Bomb - to figure out what the pigs are up to.</p>
    </div>
  </div>
  <a href="#">Find out more</a>
</div>
</body>
</html>

18. Deadpool Movie Card UI

Made by Riccardo Tartaglia. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Rubik:400,900);

*{box-sizing: border-box;}
body, html { height: 100%; min-height: 100%; }
body {
   background: linear-gradient(#f6f7fc 0%, #d5e1e8 40%);
   transform-style: preserve-3d;
   transform: perspective(800px);
   font-family: 'Lato', sans-serif;
}

#card-container{
   width: 700px;
   height: 350px;
   position:absolute;
   top: 50%; left: 50%;
   margin: -175px 0 0 -350px;
}
#card{
   -webkit-animation: backAn 60s infinite;
           animation: backAn 60s infinite;
   color:#fff;
   padding:30px;
   width:100%;
   height:100%;
   position:absolute;
   z-index:1;
 background:url(http://riccardotartaglia.it/img/deadpool/back.jpg) 100% bottom;
   box-shadow: 
     0px 45px 100px rgba(0, 0, 0, .4),
     inset 0 0 0 1000px rgba(156,27,27,.6);
}

#card .text-block{position:relative;z-index:2;text-shadow: 0px 3px 10px rgba(0, 0, 0, .7)}
#card .text-block h1{font-family: 'Rubik', sans-serif; font-size:3em; margin:0; text-transform:uppercase; font-weight:700;}
#card .text-block h1 small{font-size:.4em;color:#ccc;position:relative;bottom:10px}
#card .text-block h3{margin:0;font-weight:700;}
#card .text-block p{font-weight:300; width:60%}
#card .text-block button{transition: all .35s cubic-bezier(.37,.26,.35,1);border:4px solid #fff; padding:10px; background:transparent;font-family: 'Rubik', sans-serif;text-transform:uppercase; font-weight:700; cursor:pointer;}
#card .text-block button:hover{background:#B51D2A}

#card-container .pg{position:absolute;height:450px; width:40%; right:-10px;bottom:0px;z-index:2}
#card-container .pg > img{height:450px;}

.shine {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, rgba(0,0,0,.4) 0%,rgba(0,0,0,.2) 60%);
z-index: 1;
}
button{color:#fff;}

@-webkit-keyframes backAn {
  0%   { background-size:100% }
  50%   { background-size:250% }
  100%   { background-size:100% }
}

@keyframes backAn {
  0%   { background-size:100% }
  50%   { background-size:250% }
  100%   { background-size:100% }
}
</style>
</head>
<body>
  <div id="card-container" data-offset="2">
   <div class="pg">
      <img src="http://riccardotartaglia.it/img/deadpool/deadpool.png">
   </div>
   <div id="card">
      <div class="shine"></div>
      <div class="text-block">
         <h1>Deadpool <small>(2016)</small></h1>
         <h3>Action, Adventure, Sci-Fi</h3>
         <p>
            Deadpool is a 2016 American superhero film based on the Marvel Comics character of the same name. It is the eighth installment of the X-Men film series, and is directed by Tim Miller.
         </p>
         <button>Watch Trailer</button>
      </div>
   </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
var $poster = $('#card-container'),
$shine = $('.shine'),
w = $(window).width(),
h = $(window).height();

$(window).on('mousemove', function (e) {
  var offsetX = 0.5 - e.pageX / w,
  offsetY = 0.5 - e.pageY / h,
  dy = e.pageY - h / 2,
  dx = e.pageX - w / 2,
  theta = Math.atan2(dy, dx),
  angle = theta * 180 / Math.PI - 90,
  offsetPoster = $poster.data('offset'),
  transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + -offsetY * offsetPoster + 'deg) rotateY(' + offsetX * (offsetPoster * 2) + 'deg)';

  if (angle < 0) {
    angle = angle + 360;
  }
  $shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(0,0,0,' + e.pageY / h / 5 + ') 0%,rgba(0,0,0,.25) 80%)');

  $poster.css('transform', transformPoster);
});
    </script>
</body>
</html>