728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
/*상수 값 만들기*/
--title-horizontal-space:2.75rem;
}
/*
filter
-blur(a) : a는 길이, a만큼 흐리게 한다. 적을수록 덜 흐려진다(블러)
-brightness(a) : a는 비율 100%를 기준으로 이미지를 어둡게, 혹은 밝게 한다. (0%: 오나전 어둡게 ~ ?% 매우 밝게)(명도)
-contrast(a) : a는 비율. 100%를 기준으로 이미지 대비를 조절한다. (색의 진하기정도.)(대비)
-grayscale(a) : a는 비율. 0%(기본값)부터 100%까지, 이미지의 그레이스케일을 조절(0%는 풀컬러, 100%는 흑백)(채도)
-invert(a) : a는 비율. 0%(기본값)부터 100%까지. 이미지를 색 반전 시킨다 ( 반전)
*/
a.button {
display: block;
/* 중앙정렬 */
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
width: 30rem;
height: 20rem;
border: 1px solid #DDD;
color: cadetblue;
overflow: hidden;
}
.button > .background{
display: block;
width: 100%;
height: 100%;
position: absolute;
background-image: url(../Resource/restaurant.jpg);
filter: brightness(75%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
transition-duration: 400ms;
}
.button:hover > .background {
transform: scale(110%);
}
.button > .content {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
}
.button > .content > .title {
position: relative;
left: 0;
width: 100%;
font-size: 1.75rem;
background-color: deepskyblue;
padding: 1.25rem;
margin-block-end: 0;
margin-block-start: 0;
box-sizing: border-box;
padding: 1.25rem var(--title-horizontal-space);
}
.button > .content > .title > .arrow {
position: absolute;
top: 50%;
right: var(--title-horizontal-space);
width: 2rem;
height: 2rem;
background-color: white;
border-radius: 50%;
background-image: url(../Resource/화살표.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition-duration: 0.5s;
transform: translateY(calc(-50% + 1rem));
opacity: 0;
}
.button:hover > .content > .title > .arrow {
transform: translateY(-50%);
opacity: 1;
}
.button > .content > .exp {
display: block;
bottom: 0;
position: absolute;
line-height: 150%;
padding: 2rem var(--title-horizontal-space);
text-align: justify; /* 텍스트를 양쪽 끝 맞추세여*/
opacity: 0;
background-color: cornflowerblue;
font-size: 1.5rem;
font-weight: bold;
color: black;
transform: translateY(1rem);
transition-duration: 0.5s;
opacity: 0;
}
.button:hover > .content > .exp {
transform: translateY(0);
opacity: 1;
}
</style>
</head>
<body>
<a class="button" href="#">
<span class="background"></span>
<span class="content">
<h2 class="title">
<span>입점래스토랑 안내</span>
<span class="arrow"></span>
</h2>
<span class="exp">동대구 메리어트에 입점해 있는 레스토랑에서 즐러운 시간 보내세요</span>
</span>
</a>
</body>
</html>728x90
반응형
'코딩일지 > WEB' 카테고리의 다른 글
| animation 예제1 (0) | 2022.12.29 |
|---|---|
| transform연습 (0) | 2022.12.29 |
| transform3 (0) | 2022.12.29 |
| teansform2 (0) | 2022.12.29 |
| teansform기본 (2) | 2022.12.29 |