Interesting Postcard using HTML and Css

Poster Card

Table of Contents

Introduction

Today, we are going to create an amazing and interesting Postcard of the movie with the help of HTML and CSS, in which There will be some details of the movie, like casting people, year of release,duration, etc., which can be seen by hovering the card.

Now let’s put it together step by step by using HTML and CSS. that will be simple and easy and will be understandable by the experience guy as well as a beginner and will be responsive to every device.

HTML

First, we will make the structure of the post card with the help of of HTML. In it, we will make a parent div, and in the parenst div There will be three small divs in which we will insert the  images in the img tag, and details of the image will be shown in  animation way when we hover that particular image with the help of CSS.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Poster card</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.7.0/hint.min.css'><link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="wrapper">
    <div class="card">
        <div class="poster"><img src="https://images.pexels.com/photos/15288410/pexels-photo-15288410/free-photo-of-saint-james-church-in-bruges-belgium.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Location Unknown"></div>
        <div class="details">
            <h1>Location Unknown</h1>
            <h2>2021 • PG • 1hr 38min</h2>
            <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
                <span>4.2/5</span>
            </div>
            <div class="tags">
                <span class="tag">Italian</span>
                <span class="tag">Drama</span>
                <span class="tag">Indie</span>
            </div>
            <p class="desc">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis reiciendis doloribus ipsum eos?
            </p>
            <div class="cast">
                <h3>Cast</h3>
                <ul>
                    <li><img src="https://i.postimg.cc/jqgkqhSb/cast-11.jpg" alt="Marco Andrews" title="Marco Andrews"></li>
                    <li><img src="https://i.postimg.cc/8P7X7r7r/cast-12.jpg" alt="Rebecca Floyd" title="Rebecca Floyd"></li>
                    <li><img src="https://i.postimg.cc/2SvHwRFk/cast-13.jpg
" alt="Antonio Herrera" title="Antonio Herrera"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="poster"><img src="https://images.pexels.com/photos/18250547/pexels-photo-18250547/free-photo-of-clock-tower-of-st-peters-church-in-munich.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Location Unknown"></div>
        <div class="details">
            <h1>Air</h1>
            <h2>2020 • PG • 24min</h2>
            <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
                <span>4/5</span>
            </div>
            <div class="tags">
                <span class="tag">Romance</span>
                <span class="tag">Comedy</span>
                <span class="tag">Short</span>
            </div>
            <p class="desc">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim, qui!
            </p>
            <div class="cast">
                <h3>Cast</h3>
                <ul>
                    <li><img src="https://i.postimg.cc/yY2QcYRp/cast-21.jpg" alt="Angelina Whyte" title="Angelina Whyte"></li>
                    <li><img src="https://i.postimg.cc/R0BgpsXc/cast-22.jpg" alt="Ivan Benson" title="Ivan Benson"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="poster"><img src="https://images.pexels.com/photos/19105470/pexels-photo-19105470/free-photo-of-tower-of-the-st-stephens-cathedral-vienna-austria.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Location Unknown"></div>
        <div class="details">
            <h1>End Credits</h1>
            <h2>2021 • R • 5hr 41min</h2>
            <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
                <span>4.7/5</span>
            </div>
            <div class="tags">
                <span class="tag yellow">Teen</span>
                <span class="tag">Comedy</span>
                <span class="tag blue">Drama</span>
            </div>
            <p class="desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aliquid iusto, voluptatum dignissimos eveniet soluta!
            </p>
            <div class="cast">
                <h3>Cast</h3>
                <ul>
                    <li><img src="https://i.postimg.cc/xd3twv4B/cast-31.jpg" alt="Jessica Enduro" title="Jessica Enduro"></li>
                    <li><img src="https://i.postimg.cc/C1MmSZy5/cast-32.jpg" alt="Charles Garcia" title="Charles Garcia"></li>
                </ul>
            </div>
        </div>
    </div>
</div>

  
</body>
</html>

CSS

After making the strucuture of Post Card now we will give style to these images by CSS (an external CSS stylesheet attached to the html page). In CSS, first we will adjust the size and position of images, and then we will use the property to write details. on the image, and then we will make a parent div in which all the  information about the image will be content. At the beginning, the details will be hidden, and when we hover over the images, the detail will appear to come from bottm. We will also give the zooming effect to the image when someone hovers on the image by giving the scale and trasition property. At last, we will make it responsive to run. perfectly on any size of device.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Inter, sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #070707;
}

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.card {
    position: relative;
    width: 325px;
    height: 450px;
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.poster {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.poster::before {
    content: '';
    position: absolute;
    bottom: -45%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: .3s;
}

.card:hover .poster::before {
    bottom: 0;
}

.poster img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}

.card:hover .poster img {
    transform: scale(1.1);
}

.details {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: auto;
    padding: 1.5em 1.5em 2em;
    background: #000a;
    backdrop-filter: blur(16px) saturate(120%);
    transition: .3s;
    color: #fff;
    z-index: 2;
}

.card:hover .details {
    bottom: 0;
}

.details h1,
.details h2 {
    font-weight: 700;
}

.details h1 {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.details h2 {
    font-weight: 400;
    font-size: 1em;
    margin-bottom: 10px;
    opacity: .6;
}

.details .rating {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    gap: .25em;
}

.details .rating i {
    color: #e3c414;
}

.details .rating span {
    margin-left: 0.25em;
}

.details .tags {
    display: flex;
    gap: .375em;
    margin-bottom: .875em;
    font-size: .85em;
}

.details .tags span {
    padding: .35rem .65rem;
    color: #fff;
    border: 1.5px solid rgba(255 255 255 / 0.4);
    border-radius: 4px;
    border-radius: 50px;
}

.details .desc {
    color: #fff;
    opacity: .8;
    line-height: 1.5;
    margin-bottom: 1em;
}

.details .cast h3 {
    margin-bottom: .5em;
}

.details .cast ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    width: 100%;
}

.details .cast ul li {
    list-style: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid #fff;
}

.details .cast ul li img {
    width: 100%;
    height: 100%;
}

Finally, we made the fully responsive interesting postcard with the help of HTML and CSS successfully, step by step. You can add this. post card in your project, or you can make something similar to this. by taking ideas from here.
If you want to see output of the code , then click on the Like .

Press the download button to download the source code

2 KB

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Latest Posts

Quick Links