یک لایه نمایشی (Overlay) یک لایه شفاف از محتوا است که بر روی یک عنصر دیگر قرار می‌گیرد. این می‌تواند برای ایجاد اثرات مختلف مانند یک پنجره مدال (Modal window)، یک ابزارک (Tooltip)، یا یک بازشناس (Popover) استفاده شود.
عنصر لایه نمایشی باید به صورت مطلق موقعیت داده شود و از یک z-index بالاتر از عناصر محتوا برخوردار باشد. این اطمینان را به ما می‌دهد که لایه نمایشی روی عناصر محتوا نمایش داده شود.
برای ایجاد یک لایه نمایشی با استفاده از CSS، مراحل زیر را دنبال کنید:
-
ایجاد دو عنصر div، یکی برای خود لایه نمایشی و دیگری برای محتوایی که می‌خواهید لایه نمایشی را روی آن اعمال کنید.
-
موقعیت دادن عنصر لایه نمایشی به صورت مطلق بر روی صفحه.
-
تنظیم عرض و ارتفاع عنصر لایه نمایشی به 100%، به نحوی که تمام صفحه را پوشش دهد.
-
تنظیم رنگ پس‌زمینه عنصر لایه نمایشی به رنگ شفافیت، مانند rgba(0, 0, 0, 0.5). این باعث می‌شود لایه نمایشی قابل مشاهده باشد.
-
تنظیم z-index عنصر لایه نمایشی به مقداری بالاتر از z-index هر عنصر دیگری در صفحه. این اطمینان را به ما می‌دهد که لایه نمایشی همواره روی سایر عناصر نمایش داده شود.
Basic Example
این مثال یک اثر لایه نمایشی را نشان می‌دهد که زمانی ظاهر می‌شود که روی یک دکمه کلیک می‌کنید و هنگامی که روی هر قسمتی از صفحه کلیک می‌کنید، ناپدید می‌شود.
JavaScript می‌تواند برای نمایش و پنهان کردن عنصر div لایه نمایشی با استفاده از متد querySelector() برای دریافت عنصر لایه نمایشی استفاده شود. هنگامی که دکمه کلیک می‌شود، یک تابع اجرا می‌شود که ویژگی نمایشی مخزن لایه نمایشی را بین block (قابل مشاهده) و none (پنهان) تغییر می‌دهد.
<html>
<head>
<style>
.overlay-container {
position: fixed;
display: none;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(213, 86, 207, 0.3);
z-index: 999;
cursor: pointer;
}
.overlay-content {
padding: 20px;
}
.overlay-button {
background-color: #38dc29;
color: white;
border: none;
padding: 20px;
cursor: pointer;
font-size: 20px;
text-align: center;
display: block;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="overlay-container" onclick="overlayFun()">
<h1>Tutorialspoint CSS Overlay</h1>
</div>
<div style="padding:20px">
<button class="overlay-button" onclick="overlayFun()">Click on Button</button>
</div>
<script>
let overlayVisible = false;
function overlayFun() {
const overlay = document.querySelector(".overlay-container");
overlay.style.display = overlayVisible ? "none" : "block";
overlayVisible = !overlayVisible;
}
</script>
</body>
</html>در این مثال، با کلیک بر روی دکمه “Click on Button”، لایه نمایشی ظاهر می‌شود و با کلیک بر روی هر قسمتی از صفحه، ناپدید می‌شود. این کار با استفاده از وضعیت visible متغیر overlayVisible که از نوع boolean است، انجام می‌شود.
Top to Bottom Sliding
این مثال یک افکت لایه نمایشی را نشان می‌دهد که از بالا به پایین از تصویر لغزش می‌کند زمانی که کاربر موس را روی آن می‌اندازد.
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 40%;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .top-bottom {
opacity: 1;
height: 200px;
}
.top-bottom{
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 200px;
border-radius: 5px;
height: 0;
top: 0;
left: 40%;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "images/tutimg.png">
<div class="top-bottom">
<h2>Top to Bottom Image Overlay</h2>
</div>
</div>
</body>
</html>در این مثال، وقتی موس را بر روی تصویر می‌اندازید، یک لایه نمایشی از بالا به پایین از تصویر لغزش می‌کند و متن “Top to Bottom Image Overlay” نمایش داده می‌شود. این افکت با استفاده از ترانزیشن و تغییر اپاسیتی، از یک وضعیت شفاف به یک وضعیت مشاهده‌پذیر تغییر می‌کند.
Bottom to Top Sliding
این مثال یک تصویر با افکت لایه نمایشی را نشان می‌دهد که از پایین تصویر به بالا لغزش می‌کند وقتی کاربر موس را روی آن می‌اندازد.
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .bottom-top {
opacity: 1;
height: 200px;
}
.bottom-top {
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 200px;
border-radius: 5px;
height: 0;
bottom: 0;
left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "images/tutimg.png">
<div class="bottom-top">
<h2>Bottom to Top Image Overlay</h2>
</div>
</div>
</body>
</html>در این مثال، وقتی موس را بر روی تصویر می‌اندازید، یک لایه نمایشی از پایین تصویر به بالا لغزش می‌کند و متن “Bottom to Top Image Overlay” نمایش داده می‌شود. این افکت با استفاده از ترانزیشن و تغییر اپاسیتی، از یک وضعیت شفاف به یک وضعیت مشاهده‌پذیر تغییر می‌کند.
Left to Right Sliding
این مثال یک تصویر با افکت لایه نمایشی را نشان می‌دهد که از سمت چپ تصویر به سمت راست لغزش می‌کند وقتی کاربر موس را روی آن می‌اندازد.
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .left-right {
opacity: 1;
width: 200px;
}
.left-right {
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 0;
border-radius: 5px;
height: 200px;
top: 0;
left: 0;
margin-left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src="images/tutimg.png">
<div class="left-right">
<h2>Left to Right Image Overlay</h2>
</div>
</div>
</body>
</html>در این مثال، وقتی موس را بر روی تصویر می‌اندازید، یک لایه نمایشی از سمت چپ تصویر به سمت راست لغزش می‌کند و متن “Left to Right Image Overlay” نمایش داده می‌شود. این افکت با استفاده از ترانزیشن و تغییر اپاسیتی، از یک وضعیت شفاف به یک وضعیت مشاهده‌پذیر تغییر می‌کند.
Right to Left Sliding
این مثال یک تصویر با افکت لایه نمایشی را نشان می‌دهد که از سمت راست تصویر به سمت چپ لغزش می‌کند وقتی کاربر موس را روی آن می‌اندازد.
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 67%;
height: auto;
}
.overlay-container:hover .right-left {
opacity: 1;
width: 200px;
}
.right-left {
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 0;
border-radius: 5px;
height: 200px;
top: 0;
right: 0;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src="images/tutimg.png">
<div class="right-left">
<h2>Right to Left Image Overlay</h2>
</div>
</div>
</body>
</html>در این مثال، وقتی موس را بر روی تصویر می‌اندازید، یک لایه نمایشی از سمت راست تصویر به سمت چپ لغزش می‌کند و متن “Right to Left Image Overlay” نمایش داده می‌شود. این افکت با استفاده از ترانزیشن و تغییر اپاسیتی، از یک وضعیت شفاف به یک وضعیت مشاهده‌پذیر تغییر می‌کند.
Fade Effect
در این مثال، یک لایه نمایشی با افکت محو معرفی شده است که وقتی کاربر موس را روی تصویر می‌اندازد، روی تصویر ظاهر می‌شود.
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 25%;
}
.overlay-container:hover .fade-effect {
opacity: 0.9;
height: 200px;
}
.fade-effect {
position: absolute;
transition: 0.9s ease;
opacity: 0;
width: 200px;
height: 200px;
border-radius: 5px;
top: 0;
left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "images/tutimg.png">
<div class="fade-effect">
<h2>Fade Overlay Effect</h2>
</div>
</div>
</body>
</html>در این مثال، وقتی کاربر موس را روی تصویر می‌اندازد، یک لایه نمایشی با پس‌زمینه رنگی و متن “Fade Overlay Effect” بر روی تصویر ظاهر می‌شود و از افکت محو برای ظاهر شدن و محو شدن آن استفاده می‌شود. این افکت با تغییر اپاسیتی به صورت آرام و با استفاده از ترانزیشن ایجاد می‌شود.
Image Title Overlay
در این مثال، یک لایه نمایشی با عنوان تصویر نمایش داده می‌شود که وقتی کاربر موس را روی تصویر می‌اندازد، ظاهر می‌شود.
<html>
<head>
<style>
.overlay-container img {
width: 200px;
height: 200px;
margin-left: 250px;
}
.overlay-container {
position: relative;
width: 25%;
}
.overlay-container:hover .title-overlay {
opacity: 0.9;
height: 80px;
}
.title-overlay {
position: absolute;
transition: 0.9s ease;
opacity: 0;
width: 200px;
height: 80px;
border-radius: 5px;
bottom: 0;
left: 250px;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h1 {
text-align: center;
color: #a0f037;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src= "images/tutimg.png">
<div class="title-overlay">
<h1>Tutorialspoint</h1>
</div>
</div>
</body>
</html> در این مثال، وقتی کاربر موس را روی تصویر می‌اندازد، یک لایه نمایشی با پس‌زمینه رنگی و متن “Tutorialspoint” بر روی تصویر ظاهر می‌شود و از افکت محو برای ظاهر شدن و محو شدن آن استفاده می‌شود. این افکت با تغییر اپاسیتی به صورت آرام و با استفاده از ترانزیشن ایجاد می‌شود.
Image Icon Overlay
در این مثال، یک لایه نمایشی با آیکون‌ها روی تصویر نمایش داده می‌شود که وقتی کاربر موس را روی تصویر می‌اندازد، ظاهر می‌شود.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.overlay-container {
position: relative;
width: 200px;
height: 200px;
margin-left: 40%;
}
.overlay-container img {
width: 100%;
height: 100%;
}
.icon-overlay {
position: absolute;
transition: 0.9s ease;
opacity: 0;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(211, 70, 230, 0.9);
text-align: center;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.overlay-container:hover .icon-overlay {
opacity: 1;
}
.display-icon {
color: rgb(60, 235, 50);
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>To see the effect, hover your cursor over the image.</h2>
<div class="overlay-container">
<img src="images/tutimg.png">
<div class="icon-overlay">
<a href="#" class="display-icon">
<i class="fa fa-star"></i>
</a>
</div>
</div>
</body>
</html>وقتی کاربر موس را روی تصویر می‌اندازد، یک لایه نمایشی با پس‌زمینه رنگی و آیکون ستاره نمایش داده می‌شود و از افکت محو برای ظاهر شدن و محو شدن آن استفاده می‌شود. این افکت با تغییر اپاسیتی به صورت آرام و با استفاده از ترانزیشن ایجاد می‌شود.
Related Properties
این جدول CSS نشان‌دهنده ویژگی‌های مرتبط با ایجاد افکت لایه نمایشی است:
| ویژگی | مقدار | توضیحات |
|---|---|---|
position |
static, relative, absolute, fixed, sticky |
مشخص می‌کند که یک عنصر چگونه در صفحه قرار داده شود. |
opacity |
عدد بین 0 و 1 | تنظیم شفافیت یک عنصر. |
z-index |
عدد | تعیین ترتیب پشته‌ای عناصر؛ عناصر با z-index بالاتر بالاتر نمایش داده می‌شوند. |
transition |
مقدار زمانی و تابع تغییرات | تعریف انواع مختلف افکت‌های انیمیشن که می‌تواند بر روی عناصر اعمال شود. |
با استفاده از این ویژگی‌ها، می‌توانید افکت‌های مختلفی را بر روی عناصر و لایه‌های نمایشی خود اعمال کنید تا ظاهر و تجربه کاربر را بهبود ببخشید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام