How to Create Awesome Card Hover Effect | HTML & CSS Project - Frontend everything 2022
Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Profile Card UI with the help of HTML and CSS Only! 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Amazing Product Card UI that you can use in your own blog project. So it will look attractive.
Let's start making these amazing Profile Card UI Using HTML & CSS step by step.
Photo of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used divs for containers.
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<span class="stars"></span>
<h2 class="java">Java</h2>
<p class="java">
Java is a class-based, object-oriented programming language
that is designed to have as few implementation dependencies
as possible.
</p>
</div>
</div>
<div class="face face2">
<h2>01</h2>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<span class="stars"></span>
<h2 class="python">Python</h2>
<p class="python">
Python is an interpreted, high-level and general-purpose
programming language.
</p>
</div>
</div>
<div class="face face2">
<h2>02</h2>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<span class="stars"></span>
<h2 class="cSharp">C#</h2>
<p class="cSharp">
C# is a general-purpose, multi-paradigm programming language
encompassing static typing, strong typing, lexically scoped
and component-oriented programming disciplines.
</p>
</div>
</div>
<div class="face face2">
<h2>03</h2>
</div>
</div>
</div>
After the HTML we will design the Profile Card UI with CSS..
Output till now
CSS🎈( step - 2)
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: "Righteous", cursive;
min-height: 100vh;
background-color: #a9c9ff;
background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);
.container {
max-width: 100vw;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 35px;
margin: 0 auto;
padding: 40px 0;
.card {
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
background: #000;
border-radius: 15px;
box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
.face {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&.face1 {
box-sizing: border-box;
padding: 20px;
h2 {
margin: 0;
padding: 0;
}
.java {
background-color: #fffc00;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.python {
background-color: #00fffc;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cSharp {
background-color: #fc00ff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&.face2 {
transition: 0.5s;
h2 {
margin: 0;
padding: 0;
font-size: 10em;
color: #fff;
transition: 0.5s;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
}
}
}
}
.card:hover .face.face2 {
height: 60px;
h2 {
font-size: 2em;
}
}
.card:nth-child(1) .face.face2 {
background-image: linear-gradient(
40deg,
#fffc00 0%,
#fc00ff 45%,
#00fffc 100%
);
border-radius: 15px;
}
.card:nth-child(2) .face.face2 {
background-image: linear-gradient(
40deg,
#fc00ff 0%,
#00fffc 45%,
#fffc00 100%
);
border-radius: 15px;
}
.card:nth-child(3) .face.face2 {
background-image: linear-gradient(
40deg,
#00fffc 0%,
#fc00ff 45%,
#fffc00 100%
);
border-radius: 15px;
}
}
}
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: "Righteous", cursive;
min-height: 100vh;
background-color: #a9c9ff;
background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);
.container {
max-width: 100vw;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 35px;
margin: 0 auto;
padding: 40px 0;
.card {
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
background: #000;
border-radius: 15px;
box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
.face {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&.face1 {
box-sizing: border-box;
padding: 20px;
h2 {
margin: 0;
padding: 0;
}
.java {
background-color: #fffc00;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.python {
background-color: #00fffc;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cSharp {
background-color: #fc00ff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&.face2 {
transition: 0.5s;
h2 {
margin: 0;
padding: 0;
font-size: 10em;
color: #fff;
transition: 0.5s;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
}
}
}
}
.card:hover .face.face2 {
height: 60px;
h2 {
font-size: 2em;
}
}
.card:nth-child(1) .face.face2 {
background-image: linear-gradient(
40deg,
#fffc00 0%,
#fc00ff 45%,
#00fffc 100%
);
border-radius: 15px;
}
.card:nth-child(2) .face.face2 {
background-image: linear-gradient(
40deg,
#fc00ff 0%,
#00fffc 45%,
#fffc00 100%
);
border-radius: 15px;
}
.card:nth-child(3) .face.face2 {
background-image: linear-gradient(
40deg,
#00fffc 0%,
#fc00ff 45%,
#fffc00 100%
);
border-radius: 15px;
}
}
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
.
creator of the project:
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
I think you should introduce copy text button in your source code area up there!
ReplyDeletei think your css code is incomplate and also pls add the -webkit-background-clip code root in css.
ReplyDeleteImpressive and powerful suggestion by the author of this blog are really helpful to me.
ReplyDeleteVonex NBN
I am thankful to this blog giving unique and helpful knowledge about this topic.
ReplyDeletecampamento verano irlanda
It is really a helpful blog to find some different source to add my knowledge.
ReplyDeletehomestay irlanda
This comment has been removed by the author.
ReplyDeleteGreat blog ! I am impressed with suggestions of author.
ReplyDeleteDiseño De Exposiciones
Great blog ! I am impressed with suggestions of author.
ReplyDeleteflats in udaipur
Impressive and powerful suggestion by the author of this blog are really helpful to me.
ReplyDeleteDiseño De Exposiciones