CSS Clip Path animation card Hover effect

The clip-path CSS property lets you use shapes as your masking regions to crop out elements that fall within the shape. Here we are going to create a profile card hover effect using CSS clip-path animation. I have shared lots of CSS animation examples before in this blog. If you are interested in these, you can click the load more button on the homepage. Before collecting the source code, I suggest you watch the below video. You will get a better idea of what the code was used for. Over 1000 videos on front-end development have been uploaded to our Youtube channel. If you would like to learn more about front-end development, you can subscribe to our channel.

I hope you have watched the video and comprehend the snippets. Profile cards are important elements for any website. They are sometimes made up of an image and text elements with additional social media links at the bottom. In this snippet, When we hover over the hamburger icon on the top right corner of the profile card, the information related to the image will appear. This CSS card template is perfect for your next project.

Before starting the project, you have to link the font-awesome CDN into your project. After that, choose a particular font from the Google fonts website and link that with your project. In the HTML part, we have taken a div named 'wrapper' and placed a div called 'box' inside it. inside the 'box' div we have taken a span tag with a hamburger icon from font-awesome. now we will include the content related to the image. for that, we will take another div named 'content'. Inside that, we will include a random name, designation, and some text. We will also include the social media links in a separate paragraph tag.

In the CSS Part, we will give a gradient background for the body tag. To get our project aligned in the center of the viewport, we'll use the CSS display grid property. After that, we will set the wrapper div to have a particular height and width and to have a background image. We will set a clip-path value for the box div. If the hover-state is active the percentage will increase to 75% of the size. We will then set the hamburger icon to the top-right corner of the image.

You may also like:

CSS Clip Path animation card [ Source Code ]:

You have to make two files to make this project happen. There are two files; one is an HTML file, and the other is a CSS file. You need to link the external CSS file to the HTML file after that. You can paste the code from the below box into your project. The source code can be downloaded from the download button if you have a problem with the code.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Profile Card with Clip Path Animation | CSS Animation Examples</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
       <div class="box">
         <span><i class="fa fa-bars"></i></span>
         <div class="content">
             <h1>Jason Holder</h1>
         <h3>Web Designer</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque perspiciatis animi cumque magni facilis repellat ut voluptatem consequatur, quae optio eum id provident, quos maxime, dignissimos totam laborum tempora! Dolore esse quam voluptatem dicta eaque.
         </p>
         <p class="social">
             <i class="fa fa-instagram"></i>
             <i class="fa fa-dribbble"></i>
             <i class="fa fa-youtube"></i>
             <i class="fa fa-tumblr"></i>
         </p>
         </div>
      </div>
    </div>  
</body>
</html>

ADD CSS:

body{
  background:linear-gradient(to bottom, aliceblue, darkorange);
  margin:0;
  height: 100vh;
  display: grid;
  justify-items: center;
  align-items:center;
  font-family: 'Montserrat', sans-serif;
}
        .wrapper {
	background: url(1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	height: 500px;
	width: 350px;
	box-shadow: 0 15px 20px 5px rgba(0,0,0,0.5);
}
.box {
	background: #262626;
	width: 330px;
	padding: 10px;
	clip-path: circle(5% at 91% 7%);
	transition: all .5s ease-in-out;
	cursor: pointer;
	height: 500px;
}
        .content {
	text-align: center;
	padding: 100px 15px;
}
.box:hover{
  clip-path:circle(75%);
  background:darkorange;
}

.box:hover span{
  color:rgba(255,255,255,0);
}
.box span {
	float: right;
	color: white;
	font-weight: bold;
	transition: color .5s;
	position: relative;
	margin-right: 4%;
	top: 18px;
}

.box h1{
  color:#fff;
}
.box p {
	color: #fff;
	font-size: 11px;
	text-align: justify;
	line-height: 2;
}
        .social {
  text-align: center !important;
  margin-top: 25px;
}
.social i {
  font-size: 20px;
  margin: 0 15px;
}

I am hoping you have implemented the code successfully. If you would like to get more like this, please visit our website more frequently. Please let like-minded people know about the articles on this website. Helping others to learn is what learning is about. We would like to thank you for visiting our blog.

DOWNLOAD CODE

CSS Clip Path animation card [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Clip Path animation card Hover effect

CSS Clip Path animation card [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form