Create CSS Clip Path Animation Using CSS & HTML
Using css clip path property we'll create a nice box cards animation. Clip Path css property create a clipping region which sets what part of the element will be visible. It's a very useful property but unfortunately this property is not working on all major browsers, so if you want to use it in your future website please check first the browser compatibility.
In our animation we will create two boxes and use two images from backgorund, on hover the description will be animated using clip path. If you want to see the animation scroll to the bottom if this article and watch the video.
CSS Clip Path Animation
Let's start with the HTML code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="card">
<img src="images/img1.jpg">
<div class="descriptions">
<h1>John Wick 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it </p>
<button><i class="fab fa-youtube"></i>Play trailer on Youtube</button>
</div>
</div>
<div class="card">
<img src="images/img2.jpg">
<div class="descriptions">
<h1>Equalizer 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it </p>
<button><i class="fab fa-youtube"></i>Play trailer on Youtube</button>
</div>
</div>
</div>
</body>
</html>
Then the CSS part:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:#740490;
width:100%;
height:100vh;
font-family: 'Lato';
}
.wrapper{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:100%;
max-width: 650px;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card{
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,0.5);
cursor:pointer;
transition:all 0.5s cubic-bezier(0.8,0.5,0.2,1.4);
overflow: hidden;
position: relative;
}
.card img{
width:100%;
height:100%;
transition: all 0.5s cubic-bezier(0.8,0.5,0.2,1.4);
}
.descriptions{
position:absolute;
top:0;
left:0;
background-color:rgba(255,255,255,0.7);
widows: 100%;
height: 100%;
transition: all 0.7s ease-in-out;
padding:20px;
clip-path:circle(0% at 100% 100%);
}
.card:hover .descriptions{
left:0;
transition:all 0.7s ease-in-out;
clip-path: circle(75%);
}
.card:hover{
transition:all 0.5s cubic-bezier(0.8,0.5,0.2,1.4);
box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
transform:scale(0.97);
}
.card:hover img{
transition:all 0.5s cubic-bezier(0.8,0.5,0.2,1.4);
transform:scale(1.6) rotate(20deg);
}
.card h1{
color:#ff3838;
letter-spacing: 1px;
margin:0px;
}
.card p{
line-height: 24px;
height: 70%;
}
.card button{
width:fit-content;
height: 40px;
cursor: pointer;
border-style: none;
background:#ff3838;
color:#fff;
font-size: 15px;
outline: 0;
padding-left:10px;
padding-right: 10px;
box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
transition: all 0.5s ease-in-out;
}
.card button i{
margin-right:10px;
}
.card button:hover{
transform:scale(0.95) translateX(-5px);
transition:all 0.5s ease-in-out;
}
With few lines of code we just created a nice animation. This is the best part of using css clip path property, animations become more easier to implement.