Home Web Design CSS CSS Clip Path Animation Card | Clip-Path Hover Cards

CSS Clip Path Animation Card | Clip-Path Hover Cards

July 28, 2019

9782

How we can create an animated hover effect card using CSS clip-path? Solution: CSS Clip Path Animation Card, Clip-Path Hover Cards.

CSS clip-path property creates a clipping region that sets what part of an element should be shown. In other words, clip-path shows the hidden part of an element with animation effect addons. We can create many cool things using this property on our website or webpage.

Today you will learn to create clip-path image & text cards with hover effect. Basically, there is an image, but text block appears on mouse hover. The text block appears with the help of clip-path property, the text becomes visible with and circle opening animation. There is a button for reading more along with texts, all elements have shadow and animation.

So, Today I am sharing CSS Clip Path Animation Card. A card with image, text-block, button, and hover animation effect using this property. I have used transition, transform, clip-path, etc properties to creating the cards. You can use these UI cards on your website, I think this these will perfect for offer or schemes.

If you are thinking now how this clip-path cards actually is, then see the preview given below.

Preview Of Clip-Path Hover Cards

See this video preview to getting an idea of how these hover cards look like.

https://webdevtrick.com/wp-content/uploads/clip-path-animation-hover.mp4?_=1

Now you can see these visually. If you like these, then get the source code of its.

CSS Clip Path Animation Card Source Code

Before sharing source code, let’s talk about it. Each card has an image, texts, and a button. First, I have created a main div and put an image, then a heading, text, & finally a button. After that, I have created 3 same types of elements. When we hover on the card then the text and button appear with animation effect.

Elements become visible with clip-path, the path starts from the bottom & fill the whole card with an animation-delay. I have used transition many times on different elements, used cubic-bezier for transition delay. Basically, cubic-bezier() function defines a Cubic Bezier curve (info). On hover image scale-up using CSS scale() property.

And many more things has this program. I can’t explain all the basics in writing, You will understand easily after getting the codes. For creating the card’s design you have to create only 2 files. One for HTML & one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put the codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Clip Path Animation Card | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    
<div class="main">
        <div class="section">
            <img src="https://images.pexels.com/photos/2537547/pexels-photo-2537547.jpeg?cs=srgb&dl=beautiful-woman-blur-brunette-2537547.jpg">
            <div class="descriptions">
                <h1>Heading 1</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan. 
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan. 
                </p>
                <button>Read More</button>
            </div>
        </div>
        <div class="section">
            <img src="https://images.pexels.com/photos/2462045/pexels-photo-2462045.jpeg?cs=srgb&dl=bandana-fashion-fashionable-2462045.jpg">
            <div class="descriptions">
                <h1>Heading 2</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. 
                    Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan.  </p>
                <button>Read More</button>
            </div>
        </div>
        <div class="section">
            <img src="https://images.pexels.com/photos/1721558/pexels-photo-1721558.jpeg?cs=srgb&dl=attractive-beautiful-beauty-1721558.jpg">
            <div class="descriptions">
                <h1>Heading 3</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est.
                     Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan. </p>
                <button>Read More</button>
            </div>
        </div>
    </div>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS Clip Path Animation Card | Webdevtrick.com</title>

</head>

<body>

<h1>Heading 1</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan.

</p>

</div>

<h1>Heading 2</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est. Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a ipsum est.

Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan. </p>

</div>

<h1>Heading 3</h1>

<p>

Etiam vehicula elit eget turpis faucibus placerat. Nullam mollis neque ut semper accumsan. </p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body{
    background-color: #212121;
    padding: 0px;
    margin:0px;
    width:100%;
    height:100vh;
    font-family: 'Lato', sans-serif;
  }
.main{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
    max-width: 950px;
    height:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.section{
    flex: 1;
    flex-basis: 300px;
    flex-grow: 0;
    height: 440px;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0px 4px 7px rgba(0,0,0,.5);
    cursor: pointer;
    transition: all .5s cubic-bezier(.8,.5,.2,1.4);
    overflow: hidden;
    position: relative;
}
.section img{
    width: 100%;
    height:100%;
    transition: all .5s cubic-bezier(.8,.5,.2,1.4);
}
.descriptions{
    position: absolute;
    top:0px;
    left:0px;
    background-color: rgba(255,255,255,.7);
    width:100%;
    height:100%;
    transition: all .7s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
    clip-path: circle(0% at 100% 100%);
}
.section:hover .descriptions{
    left:0px;
    transition: all .7s ease-in-out;
    clip-path: circle(75%);
}
.section:hover{
    transition: all .5s cubic-bezier(.8,.5,.2,1.4);
    box-shadow: 0px 2px 3px rgba(0,0,0,.3);
    transform: scale(1.2);
    z-index: 9999;
}
.section:hover img{
    transition: all .5s cubic-bezier(.8,.5,.2,1.4);
    transform: scale(2);
    filter: blur(4px);
}
.section h1{
    color: #5cb85c;
    letter-spacing: 1px;
    margin: 0px;
}
.section p{
    line-height: 24px;
    height: 70%;
}
.section button{
    width: fit-content;
    height: 40px;
    cursor: pointer;
    border-style: none;
    background-color: #5cb85c;
    color:#fff;
    font-size: 15px;
    outline: none;
    box-shadow: 0px 2px 3px rgba(0,0,0,.4);
    transition: all .5s ease-in-out;
}
.section button:hover{
    transform: scale(1.2);
    transition: all .3s ease-in-out;
}

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

body{

background-color: #212121;

padding: 0px;

margin:0px;

width:100%;

height:100vh;

font-family: 'Lato', sans-serif;

}

.main{

position: absolute;

top:50%;

left:50%;

transform: translate(-50%, -50%);

width:100%;

max-width: 950px;

height:auto;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.section{

flex: 1;

flex-basis: 300px;

flex-grow: 0;

height: 440px;

background: #fff;

border: 2px solid #fff;

box-shadow: 0px 4px 7px rgba(0,0,0,.5);

cursor: pointer;

transition: all .5s cubic-bezier(.8,.5,.2,1.4);

overflow: hidden;

position: relative;

}

.section img{

width: 100%;

height:100%;

transition: all .5s cubic-bezier(.8,.5,.2,1.4);

}

.descriptions{

position: absolute;

top:0px;

left:0px;

background-color: rgba(255,255,255,.7);

width:100%;

height:100%;

transition: all .7s ease-in-out;

padding: 20px;

box-sizing: border-box;

clip-path: circle(0% at 100% 100%);

}

.section:hover .descriptions{

left:0px;

transition: all .7s ease-in-out;

clip-path: circle(75%);

}

.section:hover{

transition: all .5s cubic-bezier(.8,.5,.2,1.4);

box-shadow: 0px 2px 3px rgba(0,0,0,.3);

transform: scale(1.2);

z-index: 9999;

}

.section:hover img{

transition: all .5s cubic-bezier(.8,.5,.2,1.4);

transform: scale(2);

filter: blur(4px);

}

.section h1{

color: #5cb85c;

letter-spacing: 1px;

margin: 0px;

}

.section p{

line-height: 24px;

height: 70%;

}

.section button{

width: fit-content;

height: 40px;

cursor: pointer;

border-style: none;

background-color: #5cb85c;

color:#fff;

font-size: 15px;

outline: none;

box-shadow: 0px 2px 3px rgba(0,0,0,.4);

transition: all .5s ease-in-out;

}

.section button:hover{

transform: scale(1.2);

transition: all .3s ease-in-out;

}

That’s It. Now you have successfully created CSS Clip Path Animation Card, Clip-Path Hover Cards Design. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.