구조
<!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>Circle Hover Effect</title>
<link rel="shortcut icon" href="imgs/favicon.ico">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/circle01.css">
</head>
<body>
<ul class="ch-grid">
<li>
<div class="ch-item ch-bg-1">
<div class="ch-info">
<h3>use what you have</h3>
<p>by Angela Duncan<a href="#">more</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-bg-2">
<div class="ch-info">
<h3>common causes</h3>
<p>by Antonio F.M<a href="#">more</a></p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-bg-3">
<div class="ch-info">
<h3>pink lightning</h3>
<p>by Charlie Wagers<a href="#">more</a></p>
</div>
</div>
</li>
</ul>
</body>
</html>
RESET
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&family=Open+Sans:wght@300;600&display=swap');
/*font-family: 'Merriweather', serif; font-family: 'Open Sans', sans-serif;*/
* {margin:0; padding:0; box-sizing:border-box;}
body {
font-family: 'Open Sans', sans-serif; font-size:15px; color:#333;font-weight:300; background:url(../imgs/circle/bg.jpg);
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Merriweather', serif; font-weight:700;
text-transform:uppercase;
}
ul li {float:left; list-style:none;}
a {display:block; text-decoration:none; border:0; outline:0;}
.ch-grid {width:780px; margin:100px auto; text-align:center;}
.ch-grid::after {clear:both;}
.ch-grid li {width:220px; height:220px; margin:0 20px;}
CSS
@charset "utf-8";
.ch-item {
position:relative;
width:100%; height:100%; border-radius:50%;
box-shadow:inset 0 0 0 16px rgba(255,255,255,0.6),
0 2px 2px rgba(0,0,0,0.3);
transition:all 0.4s ease-out 0.2s;
}
.ch-bg-1 {background:url(../imgs/circle/1.jpg);}
.ch-bg-2 {background:url(../imgs/circle/2.jpg);}
.ch-bg-3 {background:url(../imgs/circle/3.jpg);}
.ch-info {
position:absolute;
width:100%; height:100%; border-radius:50%;
background:rgba(63,145,145,0.7); opacity:0;
transform:scale(0) rotate(720deg);
transition:all 0.4s ease;
}
.ch-info h3, .ch-info p {width:100%; color:#FFF; opacity:0;}
.ch-info h3 {
position:absolute; top:0;
font-size:17px; letter-spacing:-1px;
transition:all 0.4s ease-in 0.6s;
}
.ch-info p {
position:absolute; top:50px;
padding:20px 0;
font-size:13px;
border-top:1px dashed rgba(255,255,255,0.5);
transition:all 0.4s ease-in 0.8s;
}
.ch-info p a {
font-size:14px; color:#FFF222; font-weight:600;
text-transform:uppercase;
}
/*===== .ch-item:hover =====*/
.ch-item:hover {
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.3),
0 2px 2px rgba(0,0,0,0.3);
}
.ch-item:hover .ch-info {opacity:1; transform:scale(1) rotate(0deg);}
.ch-item:hover .ch-info h3, .ch-item:hover .ch-info p {opacity:1;}
.ch-item:hover .ch-info h3 {top:70px;}
.ch-item:hover .ch-info p {top:120px;}'CSS' 카테고리의 다른 글
| 써클하버이벤트(3) (0) | 2022.11.18 |
|---|---|
| 써클하버이벤트(2) (0) | 2022.11.18 |
| 아코디언 메뉴 (0) | 2022.11.18 |
| 탭버튼 (0) | 2022.11.18 |
| 레이아웃 (0) | 2022.11.18 |