Hover Fill Card - DarkSoul CodePen

Procedure

Step 1 - Basic Setup: We start by declaring the document type (DOCTYPE html) and setting the language to English (html lang="en"). The head section includes the character set, viewport settings, and the title of the page ("Preview - Hover Fill Card").

Step 2 - Importing Fonts: The code imports three Google Fonts: 'Belanosima', 'Rubik Vinyl', and 'Grand Hotel'. These fonts are used in different parts of the page to give a unique look.

Step 3 - Body Styling: The body is styled to take up the full width and height of the screen. The display is set to flex, which helps in centering the content. The default font for the body is 'Belanosima'.

Step 4 - Link Styling: Links (a) are styled to have no text decoration, and the content within them is centered using margin: auto.

Step 5 - Card Styling: Each card has a unique class (darksoul-card1, darksoul-card2, darksoul-card3) but shares some common properties:

Size & Shape: All cards are 200px by 200px, have rounded corners (border-radius: 15px), and a white background.
Box Shadow: Each card has a soft shadow to give it a slightly lifted appearance.
Alignment: Inside each card, content is aligned using align-items and justify-content with different settings for each card.

Step 6 - Circle Elements: Each card contains a "circle" element, which is a div with a unique class (circle1, circle2, circle3).

Position & Size: Initially, these circles are positioned and sized differently. For example, circle1 has a specific gradient background, while circle2 and circle3 have solid colors.
Hover Effects: When you hover over the cards, these circles expand to fill the card and change shape, creating a cool animation effect. The text color also changes to white.

Step 7 - Content Inside Cards: Each card contains an image and a text element (h2, p, h4) that describe what the card represents (Instagram, CodePen, Dribbble). The z-index is used to ensure the text and images appear above the expanding circles.

Step 8 - Media Query: There's a media query for screens smaller than 600px, which adjusts the layout so that the cards stack vertically instead of horizontally.

By following these steps, you can create a visually captivating and interactive card layout that not only highlights your creative skills but also enhances user engagement. Keep experimenting with different styles and animations to make your web designs even more unique and appealing. Remember, the key to great design lies in the details and your willingness to explore new ideas. Happy coding!

Html

<!DOCTYPE html>
    <html lang="en">
    <head>
         /* Internal styles goes here.. */
    </head>
    <body>
        <a href="https://www.instagram.com/dark.soul.io/" target="_blank">
            <div class="darksoul-card1">
                <div class="circle1"></div>
                <img src="https://darksoul-codepen.github.io/assets/images/instagram-white-icon.webp" alt="DarkSoul - Instagram" width="25" height="25" style="z-index: 100;" />
                <h2 class="content">Instagram</h2>
            </div>
        </a>
        <a href="https://codepen.io/DarkSoul-" target="_blank">
            <div class="darksoul-card2">
                <div class="circle2"></div>
                <img src="https://darksoul-codepen.github.io/assets/images/codepen_logo.png" alt="DarkSoul - CodePen" width="25" height="25" style="z-index: 100;" />
                <p class="content">CODEPEN</p>
            </div> 
        </a> 
        <a href="https://dribbble.com/dark-soul" target="_blank">
            <div class="darksoul-card3">
                <div class="circle3"></div>
                <img src="https://darksoul-codepen.github.io/assets/images/dribbble_logo.png" alt="DarkSoul - Dribbble" width="25" height="25" style="z-index: 100;" />
                <h4 class="content" style="font-weight: 600;">Dribbble</h4>
            </div>
        </a>
        <p class="disclaimer">Designed & Created by <a href="https://darksoul-codepen.github.io/" target="_blank">DarkSoul</a></p>
    </body>
    </html>

Css

@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Rubik+Vinyl&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

body
    {
        width: 100%;
        height: 100vh;
        margin: 0;
        display: flex;
        font-family: 'Belanosima', sans-serif;
       
    }
    a
    {
        margin: auto;
        text-decoration: none;
    }
    .darksoul-card1
    {
        display: flex;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 255, 255);
        box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
        border-radius: 15px;
        transition: all 2s;
        align-items: start;
        justify-content: right;
        font-family: "Grand Hotel", cursive;
    }
    .darksoul-card2
    {
        display: flex;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 255, 255);
        box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
        border-radius: 15px;
        transition: all 2s;
        align-items: start;
        justify-content: center;
        font-family: 'Belanosima', sans-serif;
    }
    .darksoul-card3
    {
        display: flex;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: rgb(255, 255, 255);
        box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
        border-radius: 15px;
        transition: all 2s;
        align-items: end;
        justify-content: left;
        font-family: "Kaushan Script", cursive;
    }
    .circle1
    {
        position: absolute;
        margin: auto;
        margin-right: 0px;
        width: 50px;
        height: 50px;
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
        border-radius: 0px 15px 0px 50px;
        transition: all 0.5s;
        
    }
    .darksoul-card1:hover .circle1
    {

background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
        width: 200px;
        height: 200px;
        border-radius: 15px;
        transition: all 0.5s;
    }
    .darksoul-card1:hover .content
    {
        color: white;
    }
    .circle2
    {
        position: absolute;
        margin: auto;
        margin-top: 35px;
        width: 50px;
        height: 50px;
        background-color: rgb(42, 42, 42);
        border-radius: 50%;
        transition: all 0.5s;
        
    }
    .darksoul-card2:hover .circle2
    {
        margin-top: 0px;
        background-color: rgb(42, 42, 42);
        width: 200px;
        height: 200px;
        border-radius: 15px;
        transition: all 0.5s;
    }
    .darksoul-card2:hover .content
    {
        color: white;
    }
    .circle3
    {
        position: absolute;
        margin: auto;
        margin-top: 35px;
        width: 50px;
        height: 50px;
        background-color: rgb(255, 201, 201);
        border-radius: 0px 50px 0px 15px;
        transition: all 0.5s;
        
    }
    .darksoul-card3:hover .circle3
    {
        margin-top: 0px;
        background-color: rgb(255, 201, 201);
        width: 200px;
        height: 200px;
        border-radius: 15px;
        transition: all 0.5s;
    }
    .content
    {
        margin: auto;
        z-index: 100;
        color: black;
        font-weight: 500;
    }
    @media only screen and (max-width: 600px) 
    {
        body
        {
            flex-direction: column;
        }
    }
    .darksoul-card1 img
    {
        position: absolute;
        margin: auto;
        padding-top: 8px;
        padding-right: 8px;
    }
    .darksoul-card2 img
    {
        position: absolute;
        margin: auto;
        margin-top: 35px;
        padding-top: 12px;
    }
    .darksoul-card3 img
    {
        position: absolute;
        margin: auto;
        padding-left: 8px;
        padding-bottom: 8px;
    }
    .disclaimer
    {
        position: absolute;
        bottom: 0px; 
        left: 0; 
        margin-left: auto; 
        right: 0; 
        margin-right: auto; 
        width: fit-content;
        color: rgb(0, 0, 0);
        text-align: center;
    }
    .disclaimer a
    {
        text-decoration: none;
        color: #202020;
        font-family: "Kaushan Script", cursive;
        font-weight: 900;
    }
    .disclaimer a:hover
    {
        text-decoration: overline;
    }

Hover Fill Cards CodePen

CodePen

Procedure

Html

Css

Js

Output Screenshot