Dear friends in this articles we learn about Cards with Amazing Hover Effect Using CSS Only | CSS Hover Effect. If you like our article then visit more.
Table of Contents
Cards Design Using CSS
After this, you have to open the code editor and save it by selecting a new file and remember that while saving the file, you must write dot html because the browser has to explain it from html itself, without html we can not run any language That’s why it is very important for us to come to html for css cards.
Hover Effects
Now you have to do coding, and make css cards your file has also been created, now time has come to do your coding, so before starting coding, you must know about html css because whatever code we will write, it is in html and css only. That’s why these languages are very important to you, so let’s start coding now.
Press ctrl + 1 and see the shortcut feature of Visual Studio Code in front of you, using which makes our work easy and very quick, when you do ctrl + 1, then the complete syntax of html will open in front of you, using which we create a website We can create web applications, all the code that is written is written inside it, so it is very important for us to learn html if we want to become a web developer, then well then we know how login form design from further coding do.
Here we’re making sure the pseudo-element is bigger than the container. This will give us something to slide around on top of the card using transform.
The transform property is making use of those CSS variables we set earlier. We will set those with JavaScript. Let’s set up the JavaScript to first listen for mouse events:
HTML For Cards
Friends, now we will know how to make the structure of html cards. So let’s see first of all you have to go to body tag and there you have to take div tag with class and keep class name cards after that we will write 1 text in this class. Then we have to take another div tag inside the cards class and we will name its class as card after that we will take h3 tag and in this we will give tilt and title will be our html.
Then we will take paragraph tag and use some lorem dummy content in it then break tag. After that we will take anchor tag and inside it we will write read more text. After all, this will become our one card, after that we will make two more cards in the same way, so we will copy this and paste it twice so that it does not take much time.
CSS for Designing
Friends, now we will know how we will style the cards with css, so let us know where to use css and in how many ways we can use it. We can use css in 3 ways. By writing the first inline and writing the second internal and writing the third external, we mean by creating a new file but we have used internal css in this article, then we will tell you how to write internal css.
So let’s know. First you have to go to head section and after that you have to take style tag and then take * tag inside it, after that we will open and close curly braces. So that we can use the properties of css inside it. Something like this first we will take margin 0 after that we will also keep padding 0 then take box sizing both box.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Now we will take the body tag and inside it we will make the display flex, after that we will take the background color rgb and then center the justify content. Then we will also center the align items, after that we will take the minimum height 100vh and then take the font family ubuntu. Friends, you will find this font on Google Fonts site, just go to it and write its cdn and paste it in the head section of your code.
body{
display: flex;
background-color: rgb(36, 36, 36);
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: ‘Ubuntu’, sans-serif;
}
Now we will take the Cards class and inside that we will take the border 10px solid and set its color to rgb. Then we will take the padding 5px, after that we will make the border radius 30px, then we will make it display flex so that whatever content is there, it becomes visible horizontally. Then after this we will take the Card class and in that we will make the width 300px and the height to 350px. Make the free border radius 20px. After that we will give box shadow inset 0 0 100px rgb then give transition all 1s ease.
.cards{
border: 10px solid rgb(90, 90, 90);
padding: 5px;
border-radius: 30px;
display: flex;
}
.card{
width: 300px;
height: 350px;
border-radius: 20px;
padding: 20px;
box-shadow: inset 0px 0px 100px rgb(85, 85, 85);
transition: all 1s ease;
}
.first:hover{
box-shadow: inset 0px 0px 100px rgb(1, 192, 1);
transform: rotate(360deg);
cursor: pointer;
}
Then we will hover the first class and inset the box shadow in it then give the transform rotate 360deg. After doing all this we will give pointer to the cursor.
Source Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
background-color: rgb(36, 36, 36);
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Ubuntu', sans-serif;
}
.cards{
border: 10px solid rgb(90, 90, 90);
padding: 5px;
border-radius: 30px;
display: flex;
}
.card{
width: 300px;
height: 350px;
border-radius: 20px;
padding: 20px;
box-shadow: inset 0px 0px 100px rgb(85, 85, 85);
transition: all 1s ease;
}
.first:hover{
box-shadow: inset 0px 0px 100px rgb(1, 192, 1);
transform: rotate(360deg);
cursor: pointer;
}
.second:hover{
box-shadow: inset 0px 0px 100px rgb(252, 2, 2);
transform: rotate(360deg);
cursor: pointer;
}
.third:hover{
box-shadow: inset 0px 0px 100px rgb(255, 0, 234);
transform: rotate(360deg);
cursor: pointer;
}
.icon{
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: inset 0px 0px 20px rgb(71, 71, 71);
font-size: 50px;
color: white;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
font-weight: bold;
font-family: 'poppins', sans-serif;
}
.icon-1{
background-color: rgb(1, 192, 1);
}
.icon-2{
background-color: rgb(252, 2, 2);
}
.icon-3{
background-color: rgb(255, 0, 234);
}
h3{
text-align: center;
margin-top: 20px;
font-size: 25px;
color: rgb(255, 255, 255);
}
p{
text-align: center;
margin-top: 20px;
color: rgb(240, 240, 240);
}
a{
text-decoration: none;
width: 100px;
height: 25px;
background-color: rgb(7, 110, 245);
color: white;
padding: 7px;
border-radius: 5px;
margin-left: 75px;
}
.one{
margin-right: 20px;
}
.three{
margin-left: 20px;
}
</style>
</head>
<body>
<div>
<div>
<div>1</div>
<h3>HTML</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
voluptatem, voluptas, rem sit quidem animi atque voluptatum unde soluta
veritatis esse nemo doloribus.
</p><br>
<a href="#">Read More..</a>
</div>
</div>
<div>
<div>
<div>2</div>
<h3>CSS</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
voluptatem, voluptas, rem sit quidem animi atque voluptatum unde soluta
veritatis esse nemo doloribus.
</p><br>
<a href="#">Read More..</a>
</div>
</div>
<div>
<div>
<div>3</div>
<h3>JAVASCRIPT</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
voluptatem, voluptas, rem sit quidem animi atque voluptatum unde soluta
veritatis esse nemo doloribus.
</p><br>
<a href="#">Read More..</a>
</div>
</div>
</body>
</html>Watch video related this article…
https://youtu.be/O2b1nHmUdUY
