<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="card"> <div class="poster"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcT7w1Dj-lkTL1CooOXihJ3WBIxyt3K9H6UZ08Ktjv8Ba3gLgC7B"></div> <div class="details"> <h2>Beauty and the Beast (2017)<br><span>Directed by Bill Condon</span></h2> <div class="rating"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <span>4/5</span> </div> <div class="tags"> <span class="fantasy">Fantasy</span> <span class="romance">Romance</span> </div> <div class="info"> <p>Lorem Ipsum has been the industry's standard, when an unknown printer took a galley remaining essentially unchanged...</p> </div> <div class="star"> <h4>Cast</h4> <ul> <li><img src="https://timedotcom.files.wordpress.com/2015/03/460517204.jpg"></li> <li><img src="https://observatoriog.bol.uol.com.br/wordpress/wp-content/uploads/2017/04/Gaston-Beauty-and-the-BEast.jpg"></li> <li><img src="http://www.1023jack.com/wp-content/uploads/2016/12/BEAUTY-AND-THE-BEAST-Extended-TV-Spot-1-Christmas-Celebration-2017-Emma-Watson-Disney-Movie-HD.jpeg"></li> <li><img src="https://timedotcom.files.wordpress.com/2015/03/460517204.jpg"></li> </ul> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=PT+Serif'); body { margin:0; padding:0; background:url(); background-size:cover; font-family: 'PT Serif', serif; } .card { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:450px; background:#000; overflow:hidden; box-shadow:0 5px 10px rgba(0,0,0,0.5); } .card .poster { position:relative; overflow:hidden; } .card .poster:before { content:''; position:absolute; bottom:-182px; left:0; width:100%; height:100%; background: linear-gradient(0deg, #000 50%, transparent); transition:0.5s; z-index:1; } .card:hover .poster:before { bottom:0; } .card .poster img { width:100%; transition:0.5s; } .card:hover .poster img { filter:blur(5px); transform:translateY(-50px); } .details { position:absolute; padding:20px; width:100%; height:74%; bottom:-182px; left:0; box-sizing:border-box; transition:0.5s; z-index:2; } .card:hover .details { bottom:0; } .details h2 { color:#fff; margin:0; padding:0; font-size:20px; } .details h2 span { font-size:14px; color:#ff9800; } .rating { position:relative; padding:5px 0; } .rating .fa { color:#f7f406; margin-right:2px; font-size:16px; } .rating span { color:#fff; } .tags { position:relative; margin-top:5px; } .tags span { padding:2px 5px; margin-right:2px; color:#fff; display:inline-block; border-radius:4px; } .tags span.fantasy { background:#7206f7; } .tags span.romance { background:#f70661; } .info { color:#fff; } .info p { margin:15px 0 10px; } .star { position:relative; } .star h4 { margin:0; padding:0; font-size:20px; color:#f7f406; } .star ul { margin:10px 0 0; padding:0; display:flex; } .star ul li { list-style:none; width:35px; height:35px; background:#fff; border-radius:50%; overflow:hidden; margin-right:6px; border:2px solid #fff; } .star ul li img { width:100%; }