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 class="hover3">
<img src="https://cdn.ibknews.com/news/photo/202001/32208_21028_4225.jpg" alt="">
</figure>
<figure class="hover4">
<img src="https://t1.daumcdn.net/cfile/tistory/140FC8494DDD0F7E09" alt="">
</figure>
</div>
</body>
</html>@font-face {
font-family: 'BMJUA';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'BMJUA';
height: 100vh;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hover_wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.hover_wrap > figure {
position: relative;
max-width: 400px;
margin: 1%;
border: 7px solid #764ba2;
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
overflow: hidden;
}
.hover_wrap > figure img {
width: 100%; vertical-align: top;
}
.hover_wrap > figure > figcaption {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background: rgba(0,0,0,0.8);
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.hover_wrap > figure > figcaption h3 {
font-size: 24px;
padding-bottom: 10px;
}
.hover_wrap > figure > figcaption p {
font-size: 18px;
}
@media (max-width: 800px){
.hover_wrap {flex-direction: column;}
}
/* hover effect */
.hover_wrap .hover3 {
position: relative;
}
.hover_wrap .hover3 img {
opacity:1;
transition: all .3s ease-in-out;
}
.hover_wrap .hover3::before {
content:'';
width: 60px; height: 1px;
background: #fff;
position: absolute; left: -100px; top: 50%;
transform: translate(-50%, -50%);
transition: all 0.33s ease-in-out;
z-index: 10;
}
.hover_wrap .hover3::after {
content:'';
width: 1px; height: 60px;
background: #fff;
position: absolute; left: 50%; top: -100px;
transform: translate(-50%, -50%);
transition: all 0.33s ease-in-out;
}
.hover_wrap .hover3:hover::before {
left: 50%; top: 50%;
}
.hover_wrap .hover3:hover::after {
left: 50%; top: 50%;
}
.hover_wrap .hover3:hover img {
opacity: 0.5;
}
.hover_wrap .hover4 {
position: relative;
}
.hover_wrap .hover4 img {
opacity:1;
transition: all .3s ease-in-out;
}
.hover_wrap .hover4::before {
content:'';
width: 60px; height: 1px;
background: #fff;
position: absolute; right: -100px; bottom: 50%;
transform: translate(50%, 50%);
transition: all 0.33s ease-in-out;
z-index: 10;
}
.hover_wrap .hover4::after {
content:'';
width: 1px; height: 60px;
background: #fff;
position: absolute; right: 50%; bottom: -100px;
transform: translate(50%, 50%);
transition: all 0.33s ease-in-out;
}
.hover_wrap .hover4:hover::before {
right: 50%; bottom: 50%;
}
.hover_wrap .hover4:hover::after {
right: 50%; bottom: 50%;
}
.hover_wrap .hover4:hover img {
opacity: 0.5;
}'내마음대로만들어보자 > CSS' 카테고리의 다른 글
| box-shadow (0) | 2022.04.09 |
|---|---|
| CSS Animation - hover Effect4 (0) | 2021.12.18 |
| CSS Animation - bar (0) | 2021.12.14 |
| CSS Animation - Wave (0) | 2021.12.13 |
| CSS Animation - cube (0) | 2021.12.12 |