Testimonial CSS Transparent Card Hover Effect With Free Code in 2021

Where we will see How to use the pseudo Elements 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 practically manner.

Here is the code

Here is the complete code of my index.html.

<!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="container">
          <!-- card first-->
    <div class="card">
        <div class="profile">
             <img src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="profile">
         </div>
         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio reprehenderit aliquam ab incidunt distinctio omnis enim, ea fuga minus sit laboriosam ducimus beatae tempore quibusdam obcaecati optio animi non, deleniti unde cupiditate minima eaque. Doloremque?</p>
         <button>Read More...</button>
     </div>
     <!-- card second -->
     <div class="card">
        <div class="profile">
             <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="profile">
         </div>
         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio reprehenderit aliquam ab incidunt distinctio omnis enim, ea fuga minus sit laboriosam ducimus beatae tempore quibusdam obcaecati optio animi non, deleniti unde cupiditate minima eaque. Doloremque?</p>
         <button>Read More...</button>
     </div>
      <!-- card third-->
      <div class="card">
        <div class="profile">
             <img src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="profile">
         </div>
         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio reprehenderit aliquam ab incidunt distinctio omnis enim, ea fuga minus sit laboriosam ducimus beatae tempore quibusdam obcaecati optio animi non, deleniti unde cupiditate minima eaque. Doloremque?</p>
         <button>Read More...</button>
     </div>
     <!-- end card -->
   </div>
</body>
</html>

Here is the complete code of my style.css file

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #131030;
  min-height: 100vh;
}

body::before {
  content: "";
  background: linear-gradient(320deg, #40e0d0 0%, #ff8c00 50%, #ff0080 100%);
  width: 300px;
  height: 300px;
  border-radius: 45%;
  position: absolute;
  top: 20%;
  left: 15%;
}

body::after {
  content: "";
  background: linear-gradient(130deg, #40e0d0 0%, #ff8c00 50%, #ff0080 100%);
  width: 300px;
  height: 300px;
  border-radius: 45%;
  position: absolute;
  bottom: 20%;
  right: 15%;
}
.container {
  display: flex;
}
.card {
  z-index: 1;
  width: 320px;
  background-color: rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 15px;
  transition: all 0.3s;
}

.card:hover {
  transform: scale(1.1);
}

.profile {
  height: 80px;
  width: 80px;
  margin-top: 10px;
}
.profile img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.8px solid rgba(224, 114, 114, 0.6);
}

.card p {
  color: whitesmoke;
  font-size: 16px;
  padding: 5px 10px;
  letter-spacing: 0.5px;
}

button {
  margin: 10px 0;
  background-color: #ff4b3b;
  border: none;
  padding: 5px 8px;
  font-size: 18px;
  border-radius: 2px;
  color: whitesmoke;
  transition: 0.3s;
}

button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

Hope you love this code and share on social media
Download full code here……