구조
<!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/circle03.css">
</head>
<body>
<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<h3>music poster</h3>
<p>by Jonathan<a href="#">more</a></p>
</div>
<div class="ch-thumb ch-bg-1"></div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<h3>beer poster</h3>
<p>by Jonathan<a href="#">more</a></p>
</div>
<div class="ch-thumb ch-bg-2"></div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<h3>devi poster</h3>
<p>by Jonathan<a href="#">more</a></p>
</div>
<div class="ch-thumb ch-bg-3"></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:0 2px 3px rgba(0,0,0,0.3);
}
.ch-info, .ch-info h3, .ch-info p, .ch-thumb {position:absolute;}
.ch-info {
width:100%; height:100%; border-radius:50%;
background:#C9512E url(../imgs/circle/noise.png);
box-shadow:0 0 0 10px rgba(0,0,0,0.1),
inset 0 0 0 0 rgba(0,0,0,0.6);
transition:all 0.4s ease 0.3s; overflow:hidden;
}
.ch-info h3, .ch-info p {color:#F8F8F8;}
.ch-info h3 {top:55px; width:100%; font-size:18px;}
.ch-info p {
top:100px; width:100%; padding:20px 0;
font-size:13px; border-top:1px dashed rgba(255,255,255,0.4);
}
.ch-info p a {
width:60px; height:60px; border-radius:50%;
margin:15px auto 0;
color:#FFF222; font-weight:600; text-transform:uppercase; line-height:60px;
background:rgba(255,255,255,0.3);
transform:translateX(100px) rotate(360deg);
transition:all 0.4s ease-in 0.6s;
}
.ch-info p a:hover {color:#FC0;}
.ch-thumb {
width:100%; height:100%; border-radius:50%;
box-shadow:inset 0 0 0 16px rgba(255,255,255,0.4),
inset 0 0 0 5px rgba(0,0,0,0.3);
transform-origin:95% 40%; /*박스 기준점을 변경*/
transition:all 0.4s ease;
}
.ch-thumb::after {
content:'';
position:absolute; left:95%; top:40%;
width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
background:#222;
}
.ch-bg-1 {background:url(../imgs/circle/7.jpg); z-index:9;}
.ch-bg-2 {background:url(../imgs/circle/8.jpg); z-index:8;}
.ch-bg-3 {background:url(../imgs/circle/9.jpg); z-index:7;}
.ch-item:hover .ch-info {
box-shadow:0 0 0 2px rgba(0,0,0,0.7),
inset 0 0 0 110px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info p a {transform:translateX(0px) rotate(0deg);}
.ch-item:hover .ch-thumb {
box-shadow:inset 0 0 0 2px rgba(255,255,255,0.6),
inset 0 0 0 16px rgba(0,0,0,0.1);
transform:rotate(-110deg);
}'CSS' 카테고리의 다른 글
| 써클하버이벤트(4) (0) | 2022.11.18 |
|---|---|
| 써클하버이벤트(2) (0) | 2022.11.18 |
| 써클하버이벤트(1) (0) | 2022.11.18 |
| 아코디언 메뉴 (0) | 2022.11.18 |
| 탭버튼 (0) | 2022.11.18 |