پرش به محتوا

کانتینر نامنظم - فراغیب

از فراغیب
دیداریویکی‌متن
صفحه‌ای تازه حاوی « <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>گالری تصاویر مجموعه</title> <style> ←تنظیمات پایه برای خوانایی بهتر: * { box-sizing: border-box; margin: 0; padding: 0; } .gallery-wrapper { display: grid; grid-template-columns: repe...» ایجاد کرد
 
خنثی‌سازی نسخهٔ 6875 از Javid (بحث)
برچسب: خنثی‌سازی
 
(۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۴: خط ۴:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>گالری تصاویر مجموعه</title>
     <style>
     <style>
        /* تنظیمات پایه برای خوانایی بهتر */
         * { box-sizing: border-box; margin: 0; padding: 0; }
         * { box-sizing: border-box; margin: 0; padding: 0; }
          
          
خط ۱۲: خط ۱۰:
             display: grid;
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             grid-template-columns: repeat(3, 1fr);
             grid-auto-rows: 250px;
             grid-auto-rows: 200px;
             gap: 15px;
             gap: 10px;
             padding: 20px;
             padding: 10px;
             max-width: 1200px;
             max-width: 1200px;
             margin: auto;
             margin: auto;
خط ۲۲: خط ۲۰:
             position: relative;
             position: relative;
             overflow: hidden;
             overflow: hidden;
             border-radius: 20px 0 20px 0;
             border-radius: 25px 0 25px 0;
             cursor: pointer;
             cursor: pointer;
         }
         }


        /* فیت شدن تصویر در هر اندازه ای */
         .gallery-item img {
         .gallery-item img {
             width: 100%;
             width: 100%;
             height: 100%;
             height: 100%;
             object-fit: cover;
             object-fit: cover;  
             transition: transform 0.5s ease;
             display: block;
         }
         }


         /* لایه شفاف خاکستری روی عکس */
         /* افکت باز شدن از وسط به طرفین */
         .overlay {
         .overlay {
             position: absolute;
             position: absolute;
             top: 0;
             top: 0; left: 0;
            left: 0;
             width: 100%; height: 100%;
             width: 100%;
            height: 100%;
             background: rgba(0, 0, 0, 0.6);
             background: rgba(0, 0, 0, 0.6);
             display: flex;
             display: flex;
خط ۴۵: خط ۴۲:
             align-items: center;
             align-items: center;
             color: #fff;
             color: #fff;
            font-size: 1.5rem;
             font-weight: bold;
             font-weight: bold;
             opacity: 0;
              
             transition: opacity 0.3s ease;
            /* شروع: لایه از وسط جمع شده */
            clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
             transition: clip-path 0.5s ease-out;
         }
         }


         .gallery-item:hover .overlay { opacity: 1; }
        /* زمان هاور: باز شدن به طرفین */
        .gallery-item:hover img { transform: scale(1.1); }
         .gallery-item:hover .overlay {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }


        /* تعیین چیدمان ردیف ها مشابه تصویر شما */
         .wide { grid-column: span 2; }
         .wide { grid-column: span 2; }


         /* ریسپانسیو موبایل */
         /* حفظ چیدمان در موبایل */
         @media (max-width: 768px) {
         @media (max-width: 480px) {
             .gallery-wrapper {
             .gallery-wrapper { grid-auto-rows: 120px; }
                grid-template-columns: 1fr;
                grid-auto-rows: 200px;
            }
            .wide { grid-column: span 1; }
         }
         }
     </style>
     </style>
خط ۷۰: خط ۶۵:


     <div class="gallery-wrapper">
     <div class="gallery-wrapper">
        <!-- ردیف ۱ -->
         <div class="gallery-item wide"><img src="image1.jpg" alt="شهربازی"><div class="overlay">شهربازی</div></div>
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="شهربازی و گیم‌نت"><div class="overlay">شهربازی</div></div>
         <div class="gallery-item"><img src="image2.jpg" alt="استخر"><div class="overlay">استخر و سونا</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000524.png" alt="استخر و سونا"><div class="overlay">استخر و سونا</div></div>
         <div class="gallery-item"><img src="image3.jpg" alt="رستوران"><div class="overlay">رستوران</div></div>
       
         <div class="gallery-item wide"><img src="image4.jpg" alt="منو ویژه"><div class="overlay">منو ویژه</div></div>
        <!-- ردیف ۲ -->
         <div class="gallery-item"><img src="image5.jpg" alt="فروشگاه"><div class="overlay">فروشگاه</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000524.png" alt="سینی کباب رستوران"><div class="overlay">رستوران</div></div>
         <div class="gallery-item wide"><img src="image6.jpg" alt="پارک آبی"><div class="overlay">پارک آبی</div></div>
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="غذاهای ایرانی و سنتی"><div class="overlay">منو ویژه</div></div>
       
        <!-- ردیف ۳ -->
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="فروشگاه پوشاک مردانه"><div class="overlay">فروشگاه</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000524.png" alt="پارک آبی و سرسره"><div class="overlay">پارک آبی</div></div>
     </div>
     </div>


</body>
</body>
</html>
</html>

نسخهٔ کنونی تا ‏۲۴ اوت ۲۰۲۶، ساعت ۱۲:۳۳

شهربازی
شهربازی
استخر
استخر و سونا
رستوران
رستوران
منو ویژه
منو ویژه
فروشگاه
فروشگاه
پارک آبی
پارک آبی

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:کانتینر_نامنظم&oldid=6878»