요소에 오버레이(뒷 배경 불투명도) 효과를 추가하는 6가지 예제를 제시하겠습니다. 각 예제는 HTML 및 CSS 코드와 함께 주석으로 설명되어 있습니다.
예제 1: 이미지에 오버레이 효과 추가
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
}
.image {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 오버레이 색상과 불투명도 조절 */
display: none;
}
.container:hover .overlay {
display: block;
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="image.jpg" alt="Image">
<div class="overlay"></div>
</div>
</body>
</html>
이 예제에서는 이미지에 오버레이 효과를 추가합니다. 이미지와 오버레이를 감싸는 컨테이너에 position: relative;를 설정하고, 오버레이에 position: absolute;를 설정하여 이미지 위에 덮습니다. 마우스 호버 시 오버레이가 나타납니다.
예제 2: 텍스트에 오버레이 효과 추가
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
}
.text {
font-size: 24px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 오버레이 색상과 불투명도 조절 */
display: none;
}
.container:hover .overlay {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Overlay Text</div>
<div class="overlay"></div>
</div>
</body>
</html>
이 예제에서는 텍스트에 오버레이 효과를 추가합니다. 텍스트와 오버레이를 감싸는 컨테이너에 position: relative;를 설정하고, 텍스트를 중앙에 정렬합니다. 마우스 호버 시 오버레이가 나타납니다.
예제 3: 버튼에 오버레이 효과 추가
<!DOCTYPE html>
<html>
<head>
<style>
.button {
position: relative;
padding: 10px 20px;
background-color: #3498db;
color: white;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 오버레이 색상과 불투명도 조절 */
display: none;
}
.button:hover .overlay {
display: block;
}
</style>
</head>
<body>
<div class="button">
Button
<div class="overlay"></div>
</div>
</body>
</html>
이 예제에서는 버튼에 오버레이 효과를 추가합니다. 버튼과 오버레이를 감싸는 컨테이너에 position: relative;를 설정하고, 버튼에 마우스를 올리면 오버레이가 나타납니다.
예제 4: 배경 이미지에 오버레이 효과 추가
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background: url('image.jpg') center/cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 오버레이 색상과 불투명도 조절 */
display: none;
}
.container:hover .overlay {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="overlay"></div>
</div>
</body>
</html>
이 예제에서는 배경 이미지에 오버레이 효과를 추가합니다. 배경 이미지와 오버레이를 감싸는 컨테이너에 position: relative;를 설정하고, 배경 이미지가 컨테이너를 가득 채우도록 설정합니다. 마우스 호버 시 오버레이가 나타납니다.
예제 5: 카드에 오버레이 효과 추가
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
height: 200px;
position: relative;
}
.image {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 오버레이 색상과 불투명도 조절 */
display: none;
}
.card:hover .overlay {
display: block;
}
</style>
</head>
<body>
<div class="card">
<img class="image" src="image.jpg" alt="Image">
<div class="overlay"></div>
</div>
</body>
</html>
이 예제에서는 카드에 오버레이 효과를 추가합니다. 카드와 오버레이를 감싸는 컨테이너에 position: relative;를 설정하고, 카드에 마우스를 올리면 오버레이가 나타납니다.
예제 6: 동영상에 오버레이 효과 추가
<!DOCTYPE html>
<html>
<head>
<style>
.video-container {
position: relative;
width: 400px;
}
.video {
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 오버레이 색상과 불투명도 조절 */
display: none;
}
.video-container:hover .overlay {
display: block;
}
</style>
</head>
<body>
<div class="video-container">
<video class="video" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="overlay"></div>
</div>
</body>
</html>
이 예제에서는 동영상에 오버레이 효과를 추가합니다. 동영상과 오버레이를 감싸는 컨테이너에 position: relative;를 설정하고, 동영상에 마우스를 올리면 오버레이가 나타납니다.
'CSS' 카테고리의 다른 글
| 드롭다운 메뉴 스타일링: 드롭다운 메뉴 디자인. (0) | 2023.12.23 |
|---|---|
| 토글 스위치: 토글 스위치 디자인 커스터마이징. (0) | 2023.12.23 |
| 푸터 고정: 푸터를 페이지 하단에 고정. (0) | 2023.12.23 |
| 슬라이더 스타일링: 이미지 슬라이더 스타일링. (0) | 2023.12.23 |
| 탭 메뉴 스타일링: 탭 메뉴 디자인 커스터마이징. (0) | 2023.12.23 |