لایه شفاف روی عکس/کافه محمد - فراغیب

<html>

<!-- پس زمینه -->
<div class="hero-bg"></div>

<!-- لایه رنگی -->
<div class="hero-overlay"></div>

<!-- محتوا -->
<div class="container">

    <div class="hero-content">

       <h1 style="color:#D7CCC8;">
           کافه پاتوق محمد
        </h1>

        <span style="color:#D7CCC8;font-size: 2rem;">
            <strog> محیطی دنج و دلپذیر برای ساخت لحظات بهتر</strong><br>
        </span>

        <a href="#" class="hero-btn">
            رزرو و سفارش آنلاین
        </a>

    </div>

</div>

<style>
/* =========================
   Hero Background
========================= */

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-image: url("https://dl.faraghaib.ir/m/260012/26001207.jpg");
    background-size: cover;
    background-position: center;

    z-index: 1;
}


/* =========================
   لایه شفاف منحنی
========================= */

.hero-overlay {
    position: absolute;
    top: 0;
    right: 0;

    width: 58%;
    height: 100%;

    /*
       لایه شفاف از سمت راست شروع می‌شود
       و سمت چپ آن به صورت منحنی وارد تصویر می‌شود
    */
    background: rgba(121 , 85 , 72,.72);

    z-index: 2;

    /*
       ایجاد منحنی در لبه سمت چپ
    */
    clip-path: ellipse(100% 85% at 100% 50%);
}


/* =========================
   Container
========================= */

.container {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 1200px;

    height: 100%;
    margin: 0 auto;

    display: flex;
    align-items: center;
}


/* =========================
   محتوای Hero
========================= */

.hero-content {
    width: 50%;
    margin-right: auto;

    text-align: right;
    padding: 40px;
    box-sizing: border-box;

    color: #BCAAA4;
}


/* عنوان */

.hero-content h1 {
    margin: 0 0 15px;

    font-size: 42px;
    line-height: 1.4;
    font-weight: 800;
}


/* توضیحات */

.hero-content p {
    margin: 0 0 25px;

    font-size: 20px;
    line-height: 1.8;
}


/* =========================
   دکمه
========================= */

.hero-btn {
    display: inline-block;

    padding: 13px 28px;

    border-radius: 50px;

    background: #ffffff;
    color: #222;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;

    transition: all 0.3s ease;
}

.hero-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}


/* =========================
   Responsive
========================= */

@media (max-width: 768px) {

    .hero-overlay {
        width: 75%;

        clip-path: ellipse(
            100% 85%
            at 100% 50%
        );
    }

    .container {
        justify-content: center;
    }

    .hero-content {
        width: 70%;
        padding: 25px;

        text-align: center;
    }

    .hero-content h1 {
        font-size: 30px;
    }

    .hero-content p {
        font-size: 17px;
    }
}


@media (max-width: 480px) {

    .hero-overlay {
        width: 100%;

        /*
          در موبایل لایه تقریباً کل تصویر را می‌گیرد
          ولی همچنان لبه منحنی حفظ می‌شود
        */
        clip-path: ellipse(
            110% 85%
            at 100% 50%
        );
    }

    .hero-content {
        width: 90%;
        padding: 20px;
    }

    .hero-content h1 {
        font-size: 26px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .hero-btn {
        padding: 11px 22px;
        font-size: 15px;
    }
}
</style>

</html>