A card comes in all sorts of shapes and sizes, but a common card will contain some information or content such as an icon, title, and some description of that particular title and icon.
In this blog (Responsive Card Hover Effect with Social Media Icons), there are three cards on this webpage. Each card contains an icon, title, and some description of that particular icon and title. In this, there are cards containing titles, icons, and some information about such as Facebook, Instagram, and Twitter. When you hover your mouse pointer over the card, the card will slide over upwards and the card appears with its respective color.
This page is made responsive, on the larger screen the card are arranged horizontally. Whereas on the smaller screen, the cards are arranged vertically that is cards are arranged one by one.
The source code of this Responsive Card Hover Effect with Social Media Icons is given below, if you want the source code of this program, you can copy it. You can use this Image Slider with your creativity and can take this project to the next level.
Responsive Card Hover Effect with Social Media Icons [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PT Sans Narrow', sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
background: #161623;
color: #fff;
margin-top: 50px;
}
.card{
width: 400px;
height: 350px;
padding: 20px;
text-align: center;margin: 0 10px;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
border-radius: 15px;
}
.card i{
width: 60px;
height: 60px;
border-radius: 50px;
line-height: 60px;
margin: auto;
background: #fff;
color: #333;
font-size: 25px;
position: relative;
top: 80px;
transition: .5s;
}
.card h1{
font-size: 30px;
color: #fff;
font-weight: 600;
letter-spacing: 1px;
position: relative;
top: 100px;
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.card p{
font-size: 16px;
color: #fff;
line-height: 26px;
font-weight: 300;
letter-spacing: 1px;
opacity: 0;
transition: .5s;
}
.card:hover p{
opacity: 1;
transition: .5s;
}
.card:hover i{
top: -50px;
transition: .5s;
}
.card:hover h1{
top: -20px;
transition: .5s;
}
#facebook:hover{
background: #3b5998;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
transition: .5s;
}
#facebook:hover i{
color: #3b5998;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
transition: .5s;
}
#instagram:hover{
background: #ef4056;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
transition: .5s;
}
#instagram:hover i{
color: #ef4056;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
transition: .5s;
}
#twitter:hover{
background: #55acee;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
transition: .5s;
}
#twitter:hover i{
color: #55acee;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
transition: .5s;
}
@media(max-width: 753px){
.card{
margin: 30px;
}
}
.credit a{
text-decoration: none;
color: tomato;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Card Hover Effect with Social Media Icons using HTML & CSS using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team