مودال تصویر در CSS (CSS Image Modal)
در این راهنما «مودال تصویر (Image Modal)» را می سازیم؛ کاربر با کلیک روی بندانگشتی، نسخه بزرگ تر را در پنجره روی صفحه می بیند و سپس آن را می بندد. ساختار اصلی با HTML است، اما برای ظاهر واکنش گرا و افکت ها از CSS استفاده می کنیم.
ایجاد پس زمینه مودال و مخفی بودن پیش فرض
مودال باید تمام صفحه را بپوشاند، روی محتوا قرار گیرد و به صورت پیش فرض مخفی باشد. سپس با افزودن کلاس مناسب نمایش داده شود.
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; transition: opacity 0.5s ease; }
.modal.show { display: flex; opacity: 1; }استایل محتوای مودال و افکت بزرگ نمایی
تصویر داخل مودال باید در قاب امن نمایش داده شود و با یک انیمیشن کوچک، بزرگ شود تا حس بازشدن بدهد.
.modal-content { position: relative; width: 90%; height: auto; max-width: 90%; max-height: 90%; border-radius: 5px; overflow: hidden; animation: zoomIn 0.5s; }
@keyframes zoomIn { from { transform: scale(0.6); } to { transform: scale(1); } }گالری تصاویر و افکت هاور
آیتم های گالری را در یک ردیف واکنش گرا بچینید و هنگام هاور کمی بزرگ نمایی کنید تا قابلیت کلیک پذیری مشخص شود.
.gallery { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0 15px; }
.gallery-item { position: relative; width: calc(25% - 20px); height: auto; margin: 10px; cursor: pointer; transition: transform 0.5s ease; }
.gallery-item:hover { transform: scale(1.1); }دکمه بستن و کپشن
دکمه بستن در گوشه راست-بالا قرار می گیرد و کپشن در پایین تصویر نمایش داده می شود.
.close { position: absolute; top: 10px; right: 15px; color: #ffffff; font-size: 35px; font-weight: bold; cursor: pointer; transition: transform 0.3s; }
.caption { position: absolute; bottom: 15px; width: 100%; text-align: center; color: #ffffff; font-size: 24px; }واکنش گرایی با Media Query
برای صفحه نمایش های کوچک تر، عرض آیتم های گالری را کاهش دهید تا ردیف بندی مناسب بماند.
@media screen and (max-width: 768px) { .gallery-item { width: calc(50% - 20px); } }
@media screen and (max-width: 480px) { .gallery-item { width: calc(100% - 20px); } }نکته: برای ساخت بندانگشتی ها و افکت های مکمل، ابتدا بخش استایل دهی تصویر را بخوانید. همچنین برای مرکزچین کردن تصاویر در صفحات بعدی به مرکز کردن تصویر مراجعه کنید.
هشدار: مودال باید همیشه دکمه بستن واضح داشته باشد و با کلیک روی پس زمینه هم بسته شود تا تجربه کاربری مختل نشود.