비전공자 개발일기

Dark Card Hover Effect 본문

HTML _CSS

Dark Card Hover Effect

HiroDaegu 2022. 6. 25. 03:38
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<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>DARK CARD HOVER EFFECT</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">  
    <div class="card">  
      <div class="face face1">  
        <div class="content">  
          <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/design_128.png?raw=true" alt="img">  
          <h3>Design</h3>  
        </div>  
      </div>  
      <div class="face face2">  
        <div class="content">  
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>  
            <a href="#">Read More</a>  
        </div>  
      </div>  
    </div>  
    <div class="card">  
      <div class="face face1">  
        <div class="content">  
          <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/code_128.png?raw=true" alt="img">  
          <h3>Code</h3>  
        </div>  
      </div>  
      <div class="face face2">  
        <div class="content">  
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>  
            <a href="#">Read More</a>  
        </div>  
      </div>  
    </div>  
    <div class="card">  
      <div class="face face1">  
        <div class="content">  
          <img src="https://github.com/Jhonierpc/WebDevelopment/blob/master/CSS%20Card%20Hover%20Effects/img/launch_128.png?raw=true" alt="img">  
          <h3>Launch</h3>  
        </div>  
      </div>  
      <div class="face face2">  
        <div class="content">  
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>  
            <a href="#">Read More</a>  
        </div>  
      </div>  
    </div>  
  </div>  
</body>
</html>
body{  
  margin: 0;  
  padding: 0;  
  min-height: 100vh;  
  background: #333;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  font-family: consolas;  
}  
.container{  
  width: 1000px;  
  position: relative;  
  display: flex;  
  justify-content: space-between;  
}  
.container .card{  
  position: relative;  
  cursor: pointer;  
}  
.container .card .face{  
  width: 300px;  
  height: 200px;  
  transition: 0.5s;  
}  
.container .card .face.face1{  
  position: relative;  
  background: #333;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  z-index: 1;  
  transform: translateY(100px);  
}  
.container .card:hover .face.face1{  
  background: #ff0057;  
  transform: translateY(0);  
}  
.container .card .face.face1 .content{  
  opacity: 0.2;  
  transition: 0.5s;  
}  
.container .card:hover .face.face1 .content{  
  opacity: 1;  
}  
.container .card .face.face1 .content img{  
  max-width: 100px;  
}  
.container .card .face.face1 .content h3{  
  margin: 10px 0 0;  
  padding: 0;  
  color: #fff;  
  text-align: center;  
  font-size: 1.5em;  
}  
.container .card .face.face2{  
  position: relative;  
  background: #fff;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 20px;  
  box-sizing: border-box;  
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);  
  transform: translateY(-100px);  
}  
.container .card:hover .face.face2{  
  transform: translateY(0);  
}  
.container .card .face.face2 .content p{  
  margin: 0;  
  padding: 0;  
}  
.container .card .face.face2 .content a{  
  margin: 15px 0 0;  
  display: inline-block;  
  text-decoration: none;  
  font-weight: 900;  
  color: #333;  
  padding: 5px;  
  border: 1px solid #333;  
}  
.container .card .face.face2 .content a:hover{  
  background: #333;  
  color: #fff;  
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

3D Text Animation Effect  (0) 2022.06.27
Animated Hot Cup of Tea  (0) 2022.06.26
Animated Magic Menu Indicator  (0) 2022.06.24
Switch Text Effect  (0) 2022.06.23
Project Management Dashboard  (0) 2022.06.22
'HTML _CSS' Related Articles more