UI/UX with Parent Before-After Card Hover Effects using HTML and CSS

Rayen

Bring a touch of sophistication and interactivity to your website with the Parent Before-After Card UI/UX hover effect. In this tutorial, we'll explore how to create an engaging design using HTML and CSS. Elevate your user experience by incorporating this visually appealing hover effect that seamlessly transforms your cards.




Step 1: HTML Markup:

Set up the HTML structure for your parent before-after card. Create a container that includes elements for the front and back faces of the card.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::Before ::After UI UX</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card"></div>
</body>
</html>

Step 2: Styling with CSS:

Create a dedicated CSS file (style.css) to style the card and implement the before-after hover effect. Utilize CSS transitions and transformations for smooth and visually appealing transitions.
/*-------------------- CSS --------------------*/
*,
*::after,
*::before{
    margin: 0;padding: 0;box-sizing: border-box;
    font-family: monospace;
}

body {
    min-height: 100vh;
    background: #111823;
}

.card {
    position: relative;
    top: 200px;
    left: 30%;
    width: 250px;
    height: 300px;
    background: #4d4d4d63;
    border-radius: 8px;
    transform: rotateX(-15deg) rotateY(-35deg);
    border: dashed 2px #4747476c;
    transition: 0.6s ease-in-out;
}

.card:hover {
    transform: translateY(-15px) translateX(15px) rotateX(-15deg) rotateY(-35deg) ;
    background: repeating-linear-gradient(45deg, 
    #608bbc10,
    #608bbc10 5px ,
    #466c9810 5px,
    #466c9810 15px
    );
    border: dashed 2px #008cff21;
    cursor: zoom-in;
}

.card::before {
    content: "::RAYEN CODE:: \A\A\A\A\A hover me";
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    transform: translateY(10px) translateX(-10px);
    background: #3a3a3a63;
    padding-top: 30px;
    border-radius: 8px;
    border: 1px solid #4747476c;
    text-align: center;
    white-space: pre;
    font-size: 1.5rem;
    z-index: 10;
    bottom: 0;
    left: 0;right: 0;
    transition: 0.4s ease-in-out;
    transition-delay: 0.4s;
}

.card:hover::before {
    height: 220px;
    transform: translateY(20px) translateX(-20px);
    background: #5f4d4b77;
    backdrop-filter: blur(2px);
    color: #0000;
}

.card::after {
    content: "                                                 \A\A:parent\A\A ::before \A\A ::after   ";
    color: white;
    white-space: pre;
    text-align: end;
    width: 100%;
    height: 100%;
    background: #44444463;
    transform: translateY(20px) translateX(-20px);
    display: flex;
    justify-items: end;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    border: 1px solid #4747476c;
    border-radius: 8px;
    transition: 0.4s ease-in-out;
    transition-delay: 0.2s;
    color: #0000;
    line-height: 1px;
}

.card:hover::after {
    color: white;
    line-height: 15px;
    backdrop-filter: blur(4px);
    height: 160px;
    transform: translateY(40px) translateX(-40px);
    background: #5f5f5f60;
    border: 1px solid #5f5f5f77;
}

.card:active {
    cursor: grabbing;
    height: 250px;
    transition: 0.6s ease-in-out;
    transition-delay: 0.1s;
    border:  2px dashed #2baaff81;
}

.card:active::before {
    height: 210px;
    transform: translateY(60px) translateX(-60px);
    border: 1px solid #ff5c4677;
}

.card:active::after {
    height: 150px;
    transform: translateY(120px) translateX(-120px);
    border: 1px solid #ffbb546e;
    font-size: 1.2rem;
    line-height: 1.8rem;
    
}

Understand the key components of the CSS styling. The rotateY transformation creates the flip effect, while opacity changes control the visibility of the "Before" and "After" content.

Personalize the content, colors, and styles to match your website's theme. Experiment with different transition durations to achieve the desired hover effect.

0 Comments