کانتینر نامنظم - فراغیب
بدون خلاصۀ ویرایش |
برچسب: خنثیسازی |
||
| (۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۴: | خط ۴: | ||
<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"> | ||
<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: | grid-auto-rows: 200px; | ||
gap: 10px; | gap: 10px; | ||
padding: 10px; | padding: 10px; | ||
max-width: | max-width: 1200px; | ||
margin: auto; | margin: auto; | ||
} | } | ||
| خط ۲۱: | خط ۲۰: | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
border-radius: 25px 0 25px 0; | |||
border-radius: | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
/* فیت شدن تصویر در هر اندازه ای */ | |||
.gallery-item img { | .gallery-item img { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
object-fit: cover; | object-fit: cover; | ||
display: block; | |||
} | } | ||
/* افکت باز شدن از وسط به طرفین */ | |||
.overlay { | .overlay { | ||
position: absolute; | position: absolute; | ||
| خط ۴۲: | خط ۴۲: | ||
align-items: center; | align-items: center; | ||
color: #fff; | color: #fff; | ||
font-weight: bold; | font-weight: bold; | ||
transition: | /* شروع: لایه از وسط جمع شده */ | ||
clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); | |||
transition: clip-path 0.5s ease-out; | |||
} | } | ||
.gallery-item:hover .overlay { | /* زمان هاور: باز شدن به طرفین */ | ||
.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; } | ||
} | } | ||
</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=" | <div class="gallery-item"><img src="image2.jpg" alt="استخر"><div class="overlay">استخر و سونا</div></div> | ||
<div class="gallery-item"><img src=" | <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=" | <div class="gallery-item wide"><img src="image6.jpg" alt="پارک آبی"><div class="overlay">پارک آبی</div></div> | ||
<div class="gallery-item wide"><img src=" | |||
<div class="gallery-item"><img src=" | |||
<div class="gallery-item wide"><img src=" | |||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
نسخهٔ کنونی تا ۲۴ اوت ۲۰۲۶، ساعت ۱۲:۳۳
