Home Card 3D Flip Card Effect On Hover – HTML and CSS only

3D Flip Card Effect On Hover – HTML and CSS only

42
0
3D Flip Card Effect On Hover Using Only HTML & CSS

3D Flip Card Effect On Hover – HTML and CSS only

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Flip Card Effect On Hover Using Only HTML & CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="flip-container">
        <div class="flip-inner-container">
            <div class="flip-front">
                <div class="profile-image">
                    image
                </div>
                <h3>John Doe</h3>
                <h6>UI& UX Front-end Developer</h6>
                <h5>Skills</h5>
                <div class="skills">
                    <span>UI & UX</span>
                    <span>Front-end Development</span>
                    <span>Html</span>
                    <span>CSS</span>
                    <span>Javascript</span>
                    <span>React</span>
                </div>

            </div>
            <div class="flip-back">
               <h2>John Doe</h2>
               <a href="#" class="btn btn_hire">Hire</a>
               <a href="#" class="btn btn_message">Message</a>
            </div>
        </div>
    </div>
   
</body>
</html>

CSS

/*   #c500d6
     #24203b 
  */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,700;1,100&display=swap");

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

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "Montserrat", sans-serif;
}

.flip-container{
  border: 2px solid transparent;
  width: 250px;
  height: 400px;
  background-color:transparent;
  border-radius: 10px;
  perspective: 1000px;
}

/* Flip Inner Container */
.flip-inner-container{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  

}
/* add hover to Flip horizonally */
.flip-container:hover .flip-inner-container{
  transform: rotateY(180deg);
}

/* position front and back */

.flip-front,
.flip-back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* background-color: green; */
  border-radius: 10px;
  box-shadow: -1px 2px 13px 0px rgba(0,0,0, 0.75);
}

/* flip  front from Start Here */
.flip-front{
 background:#24203b  ;
color: #ffffff;
padding: 20px;
}

.flip-front .profile-image{
  background-image: url("bg-image.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 150px;
  height: 150px;  
  border-radius: 50%;
  border: 4px solid #c500d6;
  margin: auto;
  margin-top: 20px;
}

.flip-front h3{
  margin-top: 5px;
  
}

.flip-front h6{
  font-weight: 200;
  margin: 5px 0;
  text-transform: uppercase;
}
.flip-front h5{
  text-transform: uppercase;
  margin: 30px 0 5px 0;
}

.flip-front .skills{
  border-top: 1px solid #c500d6;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 400;
}

.flip-front .skills span{
  background: #ffffff;
  color: #c500d6;
  padding-top: 2px 5px;
  margin-bottom: 10px;
  display: inline-block;

}


/* flip back from Start Here */
.flip-back{
  background: #c500d6;
  transform: rotateY(180deg);

}

.flip-back h2{
  margin-top: 100px;
}

.flip-back .btn{
display: block;
padding: 10px 20px;
background: #24203b;
text-decoration: none;
color: #ffffff;
margin: 10px;
border-radius: 20px;

}

.flip-back .btn:hover{
  background:  #c500d6;
  border: 2px solid #24203b;
}




(Visited 18 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here