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 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!