CSS - 오버레이: 동적 웹 효과를 만드는 초보자 가이드

안녕하세요, 미래의 웹 디자인 슈퍼스타 여러분! 오늘 우리는 CSS 오버레이의 fascinatig 세상으로 점프进去吧. 초보자라면 걱정하지 마세요 - 나도 처음 오버레이에 대해 배울 때가 있었고, 당신도 이것을 재미있고 보람 있게 찾을 것이라고 약속합니다. 그럼 이 여정을 함께 시작해 보죠!

CSS 오버레이는 무엇인가요?

코드로 뛰어들기 전에 오버레이가 무엇인지 이해해 보겠습니다. 예를 들어, 아름다운 그림을 보고 있는데 갑자기 누군가 투명한 시트를 그 위에 올려놓고 텍스트를 썼다면 어떨까요? 그게 웹사이트에서 오버레이가 하는 일입니다 - 기존 콘텐츠 위에 추가 레이어를 추가하여 추가 정보를 제공하거나 시각 효과를 만듭니다.

CSS 오버레이 - 기본 예제

간단한 오버레이 예제로 시작해 보겠습니다. 다음은 HTML과 CSS 코드입니다:

<div class="container">
<img src="cute-puppy.jpg" alt="귀여운 강아지">
<div class="overlay">
<div class="text">안녕하세요, 저는 강아지입니다!</div>
</div>
</div>

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

이를 해부해 보겠습니다:

1. 우리는 이미지와 오버레이 div를 포함한 컨테이너가 있습니다.
2. 오버레이는 컨테이너 내에서 절대적으로 위치합니다.
3. 초기에는 오버레이의 투명도가 0(보이지 않음)입니다.
4. 컨테이너에 마우스를 올리면 오버레이의 투명도가 1(전부 보임)으로 변합니다.
5. 텍스트는 오버레이 내에서 중앙에 배치됩니다.

CSS 오버레이 - 상에서 아래로 슬라이딩

이제 슬라이딩 효과를 더해보겠습니다! 오버레이가 상에서 아래로 슬라이드하는 CSS를 수정하는 방법은 다음과 같습니다:

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
bottom: 0;
height: 100%;
}

이 예제에서 오버레이는 이미지 위에 위치하고(bottom: 100%) 높이가 없습니다. 마우스를 올리면 아래로 슬라이드하여 전체 이미지를 덮습니다.

CSS 오버레이 - 아래에서 위로 슬라이딩

오버레이가 위에서 아래로 슬라이드하는 대신 아래에서 위로 슬라이드하게 하려면요? 간단합니다! 몇 줄을 변경하면 됩니다:

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
height: 100%;
}

이제 오버레이는 아래에서 시작하고 위로 확장됩니다.

CSS 오버레이 - 왼쪽에서 오른쪽으로 슬라이딩

이제 오버레이를 왼쪽에서 오른쪽으로 슬라이드하게 만들어 보겠습니다:

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
right: 0;
}

이제 오버레이는 왼쪽에서 시작하고 왼쪽으로 확장됩니다.

CSS 오버레이 - 오른쪽에서 왼쪽으로 슬라이딩

물론이죠, 오른쪽에서 왼쪽으로 슬라이드하는 것도 가능합니다:

.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
left: 0;
}

이번에는 오버레이가 오른쪽에서 시작하고 왼쪽으로 슬라이드합니다.

CSS 오버레이 -.fade 효과

첫 번째 예제는 실제로 fade 효과였습니다! 하지만 더 부드럽게 만들어 보겠습니다:

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

이렇게 하면 마우스를 올리면 부드러운 fade-in 효과가 나타납니다.

CSS 오버레이 - 이미지 제목 오버레이

이제 마우스를 올리면 이미지 제목이 나타나는 오버레이를 만들어 보겠습니다:

<div class="container">
<img src="cute-puppy.jpg" alt="귀여운 강아지" class="image">
<div class="overlay">
<div class="title">귀여운 강아지</div>
</div>
</div>

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}

.container:hover .overlay {
opacity: 1;
}

이렇게 하면 마우스를 올리면 이미지 아래에서 제목 오버레이가 나타납니다.

CSS 오버레이 - 이미지 아이콘 오버레이

이제 이미지에 아이콘 오버레이를 추가해 보겠습니다:

<div class="container">
<img src="cute-puppy.jpg" alt="귀여운 강아지" class="image">
<div class="overlay">
<a href="#" class="icon" title="사용자 프로필">
<i class="fa fa-user"></i>
</a>
</div>
</div>

.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.fa-user:hover {
color: #eee;
}

이렇게 하면 마우스를 올리면 이미지 중앙에 아이콘 오버레이가 나타납니다.

CSS 오버레이 - 관련 속성

여기 CSS 오버레이에서 흔히 사용되는 속성 목록입니다:

속성	설명
position	위치 방법을 설정합니다
top, bottom, left, right	오버레이의 위치를 지정합니다
width, height	오버레이의 크기를 설정합니다
opacity	오버레이의 투명도를 제어합니다
transition	오버레이의 나타나고 사라지는 방식을 정의합니다
background-color	오버레이의 색상을 설정합니다
z-index	요소의 쌓이는 순서를 제어합니다

이제 여러분은 CSS 오버레이의 기본을 배웠습니다. 연습이 완벽을 만들어 줍니다, 그래서 이 예제들을 실험해 두말할 것 없이! 누가 알략니까? 당신이 다음 큰 웹 디자인 트렌드를 만들 수도 있죠! 행복하게 코딩하시고, 오버레이가 항상 부드럽고 전환이 원활하시길 바랍니다!

Credits: Image by storyset