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
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published.

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

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games
Secured By miniOrange