<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>위아래 분리 네비게이션 호버 이펙트</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
body {
font-family: 'Nanum Gothic', sans-serif;
font-size: 15px;
color: #fff;
line-height: 1.5em;
font-weight: 300;
margin: 0;
background-color: #222;
}
a {
text-decoration: none;
color: #222;
}
.items {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.item {
width: 300px;
height: 200px;
display: inline-block;
position: relative;
margin: 10px;
}
.front {
width: 100%;
height: inherit;
background-color: #333;
z-index: 1;
}
.front,
.back {
position: absolute;
transition: 0.5s;
top: 0;
}
.front h2 {
margin-top: 0;
}
.back {
box-sizing: border-box;
background-color: #fff;
color: #000;
height: inherit;
text-align: center;
padding: 20px;
opacity: 0;
}
.back a {
font-size: 13px;
background-color: yellowgreen;
padding: 5px 15px;
color: #fff;
border-radius: 20px;
}
.back a:hover {
background-color: #000;
}
.item:hover .front {
top: -50%;
}
.item:hover .front img {
animation: ani 1s linear infinite;
}
.item:hover .back {
top: 50%;
opacity: 1;
}
@keyframes ani {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div class="items">
<div class="item">
<div class="front">
<img src="imgs/space-01.png" alt="" />
<h2>Mars</h2>
</div>
<div class="back">
<p>
화성은 태양계의 네 번째 행성이다. 4개의 지구형 행성 중 하나다.
동양권에서는 불을 뜻하는 화(火)를 써서 화성이라 부르고 로마 신화의
전쟁의 신 마르스의 이름을 따 Mars라 부른다.
</p>
<a href="#none">Read More</a>
</div>
</div>
<div class="item">
<div class="front">
<img src="imgs/space-02.png" alt="" />
<h2>Jupiter</h2>
</div>
<div class="back">
<p>
목성은 태양계의 다섯번째 행성이자 가장 큰 행성이다. 태양의 질량의
천분의 일배에 달하는 거대행성으로, 태양계에 있는 다른 모든 행성들을
합한 질량의 약 2.5배에 이른다.
</p>
<a href="#none">Read More</a>
</div>
</div>
<div class="item">
<div class="front">
<img src="imgs/space-03.png" alt="" />
<h2>Saturnus</h2>
</div>
<div class="back">
<p>
토성은 태양으로부터 여섯 번째에 있는 태양계의 행성으로,
진성(鎭星)으로도 불렀다. 토성은 태양계 내의 행성 중 목성에 이어 두
번째로 크며, 지름은 약 12만 킬로미터이다.
</p>
<a href="#none">Read More</a>
</div>
</div>
</div>
</body>
</html>
- 가로배치할 item들 .item { display: inline-block; }
- transition 시작할때 속성 값이 없으면 안먹힘
🐢 💨 💨