1. html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card UI</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="card">
<i class="fa-solid fa-credit-card fa-6x"></i>
<i class="fa-regular fa-credit-card fa-6x"></i>
</div>
</body>
</html>2. css 코드
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background-color: #171c3c;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card{
width: 200px;
height: 300px;
background-color: #ed4848;
position: relative;
transition: all 0.5s;
/* display: flex;
justify-content: center;
align-items: center; */
}
.card:hover{
box-shadow: inset 0 0 0 100px rgba(255, 190, 0, 0.7);
}
.card i{
color: white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -54px;
margin-top: -48px;
cursor: pointer;
transition: all 0.5s;
}
.card i:nth-of-type(1){
transform: scale(0);
}
.card:hover i:nth-of-type(1){
transform: scale(1);
}
.card:hover i:nth-of-type(2){
transform: scale(0);
}3. 결과
블로그 이전했습니다 -> https://young-code.tistory.com