THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Awesome Card Hover Effects using CSS Only πŸ”₯ Free Source Code

 

  🌊 Awesome Card Hover Effects using CSS Only πŸ”₯ Free Source Code




After working on CSS/CSS3 for so long, It's time to move our knowledge to a more advanced part. Where we will see How to use the Logic and how to use CSS3 properties in our applications. We will go through each property line by line and understand the meaning and the output of it in a practical manner.

First, I highly recommend you to watch the video and then look for the code and try to do it by yourself. And use the code for reference.

Here is the code

Github Link Code




Here is the complete code of my HTML file( Complete UI)



<!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>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="card">
      <div class="card_data card_content">
        <h1>Thapa technical</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam
          reiciendis dolor quibusdam, laborum quos.
        </p>
        <a
          href="https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/"
          target="_blank"
          >Subscribe</a
        >
      </div>
      <div class="card_data card_number">
        <h2>55</h2>
      </div>
    </div>
  </body>
</html>






Here is the complete code of my CSS file( Complete UI)


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  height: 100vh;
  background-color: #212f3d;
  display: grid;
  place-items: center;
}

.card {
  width: 35rem;
  min-width: 20rem;
  height: 40rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.card_content {
  text-align: center;
  padding: 0 3rem;
  position: absolute;
}

.card_content h1 {
  font-size: 3rem;
  text-transform: capitalize;
  color: #34495e;
  margin-top: 3rem;
}

.card_content p {
  margin: 1rem 0 3rem 0;
  font-size: 1.4rem;
}

a {
  text-decoration: none;
  border: 0.1rem solid #34495e;
  padding: 1rem 2.2rem;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #34495e;
  background-color: #34495e;
  color: #fff;
  margin-top: 3rem;
}

a:hover {
  background-color: #34495e;
  color: #fff;
}

.card_number {
  position: absolute;
  background-color: #2e86c1;
  color: #fff;
  font-size: 8rem;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transition: all 0.5s linear;
}

.card_number {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 0.2rem dotted #34495e;
  color: #34495e;
  font-size: 2rem;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}





4 comments:

  1. Whether you are just starting your company, working with a new vendor or just want to learn more about how QuickBooks works, dial Quickbooks Support Phone Number +1 866-669-5068 for help along the way.

    ReplyDelete
  2. Great and valuable information,Thanks for sharing. Alos visit Amazon.com for unlimited e-commerce products.

    ReplyDelete
  3. I find it useful is the ability to call Quickbooks phone numbers for help. This can be done by dialing Quickbooks Customer Service Phone Number +1 877-693-1115 Illniois.
    When you do, you will reach the customer service team, who will be able to provide assistance with any question or issue that you may have.

    ReplyDelete
  4. The next time I read a blog, I hope that it does not fail me just as much as this particular one. I mean, I know it was my choice to read, nonetheless I actually believed you would probably have something useful to talk about. All I hear is a bunch of whining about something you could fix if you were not too busy looking for attention.
    https://www.webranksindia.com/

    ReplyDelete