728x90
<!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>Document</title>
<link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet">
</head>
<body>
<div class="hover_wrap">
//figure 태그는 img태그와는 다르게 설명을 넣을때사용하며, 이미지/영상 등을 올릴때 쓴다.
//설명을 넣을때는 figcaption태그를 활용
<figure class="hover5">
<img src="https://thumb.mt.co.kr/06/2021/06/2021061706530684235_2.jpg/dims/optimize/" alt="">
<figcaption>
<h3><strong>mouse hover</strong></h3>
</figcaption>
</figure>
<figure class="hover6">
<img src="https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/202012/07/f30f516f-1ba2-47fa-834f-4eb89cbe6bd3.jpg" alt="">
<figcaption>
<h3><strong>mouse hover</strong></h3>
</figcaption>
</figure>
</div>
</body>
</html>body{
height: 100vh;
background: #0F2027;
background: linear-gradient(120deg, #2C5364, #203A43, #0F2027);
font-family: 'Jua', sans-serif;
}
.hover_wrap{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.hover_wrap figure{
position: relative;
width: 400px; margin: 10px;
cursor: pointer;
background: #fff;
border-radius: 4px;
overflow: hidden;
}
.hover_wrap figure img{
width:100%;
transition:all 0.3s ease;
border-radius:4px;
display:block;
}
.hover_wrap figure:hover img{
opacity:0.1;
}
.hover_wrap figcaption {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.hover_wrap figcaption::before {
content:'';
width: 150px; height: 150px;
background: #000;
border-radius: 50%;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index:1;
}
.hover_wrap figcaption h3 {
color: #fff;
z-index: 20;
text-transform: uppercase;
font-size: 16px;
}
/* hover effect1 */
.hover_wrap .hover5 figcaption {
transform:translatex(80%) rotate(180deg);
transition: all 0.3s ease;
}
.hover_wrap .hover5:hover figcaption {
transform: translatex(0%) rotate(0deg);
}
/* media query */
@media (max-width:800px){
.hover_wrap{flex-direction:column;}
}
/*hover effect2 */
.hover_wrap .hover6 figcaption{
transform:translatex(-80%) rotate(180deg);
transition:all 0.4s ease;
}
.hover_wrap .hover6:hover figcaption{
transform:translatex(0%)rotate(0deg);
}
'내마음대로만들어보자 > CSS' 카테고리의 다른 글
| CSS Animation - dot (0) | 2021.12.12 |
|---|---|
| CSS Animation -tail (0) | 2021.12.12 |
| display-flex (0) | 2021.08.08 |
| overflow (0) | 2021.08.08 |
| background url - repeat (0) | 2021.06.13 |