22 0
overla css orchiddev.ir

افکت شناور پوششی (Overlay) با CSS

آنچه در این مقاله می خوانید
    1. کد HTML :
    2. کد CSS :
    3. پیش نمایش :

در این مقاله یک افکت ساده شناور پوششی برای عکس ها بپردازیم که بتوانید بر روی عکس ها یا باکس های مختلف ایجاد کنید.

کار این افکت ها این است که جلوه خاصی را ایجاد می کند و می‌توانند تأثیر بیش‌تری نسبت به آنچه انتظار دارید بر روی مخاطب داشته باشند.

به ترتیب زیر:

کد HTML :

<div class="boxportfolio">
    <figure class="imgportfolio">
       <img src="img/2639701975.png" class="img-fluid rounded-4"/>
    </figure>
    <div class="overlays">
        <h1 class="fs-4 mb-3">توسعه دهنده ارکیده</h1>
        <hr>
        <i class="fa-solid fa-link me-3"></i>
        <i class="fa-solid fa-eye"></i>
    </div>		
</div>

کد CSS :

.boxportfolio {
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 500px;
}

figure.imgportfolio img {
    display: block;
    width: 100%;
}

.overlays {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    transition: .5s ease-out;
    opacity: 0;
    color: white;
    padding: 10px 0px 5px 10px;
    text-align: center;
    border-radius: 18px;
}

.boxportfolio:hover .overlays {
    opacity: 1;
}

پیش نمایش :

OrchidDev

موفق باشید 🙂

HTML & CSS فوریه / 19 / 2023 105

دیدگاه شما


طراحی و کد نویسی شده توسط توسعه دهنده ارکید