M/s VIKASH TECH - We Write Imaginations to Codes..!!

Pure CSS Responsive Cards Design with Hover Effect

Hello readers, Today in this blog you’ll learn how to create Responsive Cards with Hover Effect in HTML & CSS only.
Maybe you know what is a card on the website. If you don’t know about this, Often cards are used to organize listings of blog posts, products, services, etc. Section with border and content and take margin from another one they are cards.
As you can see in the image, this is a pure CSS card with a hover effect. you can see there are three cards, icons, buttons, and some dummy texts. These cards are fully responsive with the help of CSS @media property. To create these Cards, I used simple and easy HTML CSS codes which help the beginner to understand easily.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Responsive Cards</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="cards">
      <h2 class="header">
Responsive Cards CSS</h2>
<div class="services">
        <div class="content content-1">
          <div class="fab fa-twitter">
</div>
<h2>
Twitter</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
<div class="content content-2">
          <div class="fab fa-instagram">
</div>
<h2>
Instagram</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
<div class="content content-3">
          <div class="fab fa-youtube">
</div>
<h2>
Youtube</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat',sans-serif;
}
.cards{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}
.cards h2.header{
  font-size: 40px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.services{
  display: flex;
  align-items: center;
}
.content{
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 20px;
  padding: 20px;
  border: 2px solid black;
  border-radius: 4px;
  transition: all .3s ease;
}
.content .fab{
  font-size: 70px;
  margin: 16px 0;
}
.content > *{
  flex: 1 1 100%;
}
.content:hover{
  color: white;
}
.content:hover a{
  border-color: white;
  background: white;
}
.content-1:hover{
  border-color: #1DA1F2;
  background: #1DA1F2;
}
.content-1:hover a{
  color: #1DA1F2;
}
.content-2:hover{
  border-color: #E1306C;
  background: #E1306C;
}
.content-2:hover a{
  color: #E1306C;
}
.content-3:hover{
  border-color: #ff0000;
  background: #ff0000;
}
.content-3:hover a{
  color: #ff0000;
}
.content h2{
  font-size: 30px;
  margin: 16px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.content p{
  font-size: 17px;
  font-family: 'Poppins',sans-serif;
}
.content a{
  margin: 22px 0;
  background: black;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid black;
  padding: 15px 0;
  border-radius: 25px;
  transition: .3s ease;
}
.content a:hover{
  border-radius: 4px;
}
@media (max-width: 900px) {
  .services{
    display: flex;
    flex-direction: column;
  }
}
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

SuiteCRM, an open source tool for startups to use from an early stage.

When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

%d bloggers like this: