Realistic Shadows to image Cards using HTML CSS Tutorial

Namaste!

Table of Contents

Realistic Shadows to image Cards

In this tutorial, I tried for making a Realistic Shadows to image Cards effect animation using Html CSS.

Learn how to create a Realistic Shadows to image Cards using HTML CSS. Tip: Go to our CSS Images Tutorial to learn more about how to style images.

Let’s enjoy, have fun!

Realistic Shadows to image Cards Effect Youtube Tutorial

Realistic Shadows to image Cards Effect Full Tutorial

Realistic Shadows to image Cards Effect Source Code Free Download

To get the Realistic Shadows to image Cards effect source code, Copy below-provided code and replace it with your code files

.html file code

Put below code inside your html file’s <body> Your Code Here </body> tags

These tags are used here : <ul>, <li>, <a>, <span>

<main>
        <div class="image-card" style="background-image: url(image1.jpg);"></div>
        <div class="image-card" style="background-image: url(image2.jpg);"></div>
        <div class="image-card" style="background-image: url(image3.jpg);"></div>
        <div class="image-card" style="background-image: url(image4.jpg);"></div>
    </main>

.css file code

Put below code inside your CSS file’s <style> Your Code Here </style> tags

These classes & Properties are used here: display, background, color, border-radius, :hover, margin

:root {
    --size: 150px;
    --radius: calc(var(--size)*20 / 100);
}

body {
    margin: 0;
    background: #e9e9f4;
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    margin: auto;
}

.image-card {
    background-size: cover;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius);
    position: relative;
    background-size: cover;
    margin: calc(var(--size)*20 / 100);
}

.image-card::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 100%;
    background-image: inherit;
    background-size: cover;
    border-radius: var(--radius);
    z-index: -1;
    filter: blur(12px);
    opacity: 0.6;
    left: 50%;
    transform: translate(-50%, 10%);
}