Realistic Shadows to image Cards using HTML CSS Tutorial

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.

Namaste!

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%);
}

Subscribe to Us on YouTube

Just keep exploring the codes, and do something creative with programming code. coding is always fun.

So, have fun! #happycoding #codinghindi

Thank You!

Share your love
Default image
Coding Hindi
Articles: 38

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

10 Best Chrome Extensions for Developers in 2022. 10 Best Free C Programming Courses to Take in 2022 9 Most Useful Tools For Instagram Growth.[2022] What is an operating system ? How to Make Money Online from Instagram in India?