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

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

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

به ترتیب زیر:

کد 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;
}

پیش نمایش :

موفق باشید 🙂