How to make movie blogpost card with hover effect using html and css | BY Ascode

css cards ascode
simple css card design,
css cards responsive,
advanced css cards,
horizontal card css,
dashboard card design css,
css card hover effects,
build a responsive news blog post card html and css,
blog card html css,
blog card ascode,
free html css business card template,
blog card css codepen,
blog card bootstrap,
css cards ascode,
blog card template,simple card hover effects,
card hover effects bootstrap 4,
card hover effect css,
card hover effects ascode,
card hover effects css ascode,
card hover effects bootstrap 5,
bootstrap 4 card hover effect ascode,
react card hover effects, ascode, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to Ascode Blog . In this post we are going to learn how make movie blogpost card and add hover effect. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>movie blog card</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="style.css">
  <div class="card">
    <div class="icon"><i class="fas fa-play-circle"></i></div>
    <div class="content">
      <h2>Nullam Molesite<br>Mravida Lobortis</h2>
      <p>Nunc tincideunt, elit noncursus euismod,lacus augue prnare metus, rgestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urma. Morbi dui....</p>



    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
  body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;

  .card {
    width: 900px;
    height: 450px;
    border-bottom: 5px solid red;
    border-top: 5px solid green;
    border-right:5px solid yellow;
    border-left: 5px solid blue;
    background-image: url(banner.jpg);
    background-size: cover;
    overflow: hidden;
  .icon {
    position: absolute;
    top: 40%;
    left: 50%;
    font-size: 10rem;
    animation: bounce 1s linear infinite;
  .fas {
    color: #640b49;
    background: #fff;
    border-radius: 50%;
  @keyframes bounce {
    10% {
            transform: scale(0.3);
        100% {
            transform: scale(1.2);
  .card:hover .content {
    transform: translateX(0);
  .content {
    background: #640b4980;
    width: 450px;
    height: 450px;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: 0.5s;
  h2 {
    font-size: 2.3rem;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 30px 20px;
    letter-spacing: 0.5px;
  p {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 500;
    padding: 20px;
    letter-spacing: 0.3px;

Youtube Tutorial


Post a Comment


Join Telegram