فراغیب

الگو:کانتینر نامنظم: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۴: خط ۴:
     <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: 150px; /* ارتفاع پایه برای حفظ تناسب در موبایل */
             grid-auto-rows: 200px;
             gap: 10px;
             gap: 10px;
             padding: 10px;
             padding: 10px;
             max-width: 1000px;
             max-width: 1200px;
             margin: auto;
             margin: auto;
         }
         }
خط ۲۱: خط ۲۰:
             position: relative;
             position: relative;
             overflow: hidden;
             overflow: hidden;
            /* گوشه‌های درخواستی: راست-بالا تیز(0)، چپ-بالا گرد(20px)، راست-پایین گرد(20px)، چپ-پایین تیز(0) */
             border-radius: 25px 0 25px 0;
             border-radius: 20px 0 20px 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;
خط ۴۲: خط ۴۲:
             align-items: center;
             align-items: center;
             color: #fff;
             color: #fff;
            font-size: 14px;
             font-weight: bold;
             font-weight: bold;
             opacity: 0;
              
             transition: opacity 0.3s ease;
            /* شروع: لایه از وسط جمع شده */
            border-radius: 0 20px 20px 0;
            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: 480px) {
         @media (max-width: 480px) {
             .gallery-wrapper {
             .gallery-wrapper { grid-auto-rows: 120px; }
                grid-auto-rows: 100px; /* کاهش ارتفاع در موبایل */
                gap: 5px;
            }
            .overlay { font-size: 10px; } /* کوچک کردن متن برای موبایل */
         }
         }
     </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/26000521.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/26000507.jpg" 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/26000510.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/26000512.jpg" alt="منو غذا"><div class="overlay">نمونه چاپ بنر تسلیت</div></div>
       
        <!-- ردیف ۳ -->
         <div class="gallery-item wide"><img src="https://dl.faraghaib.ir/m/260005/26000506.png" alt="فروشگاه"><div class="overlay">نمونه چاپ بنر تبریک</div></div>
         <div class="gallery-item"><img src="https://dl.faraghaib.ir/m/260005/26000525.png" alt="پارک آبی"><div class="overlay">نمونه چاپ تراکت</div></div>
     </div>
     </div>


</body>
</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_نامنظم»