افکت گذاری تصاویر با Hover CSS

وقتی نشانگر ماوس روی تصویری قرار میگیرد, سایه عکس ظاهر می شود که سایت را از حالت بی روحی و یکنواختی خارج می کنید. می توانید با استفاده از Hover CSS بر روی عکس ها سایه ایجاد کنید.

پیش نمایش زیر:

برای شروع افکت گذاری تصاویر به ترتیب زیر پیش بروید.

۱. کد HTML :

<article class="card cards border-0">
    <img src="img/1.png" class="img-fluid">
    <div class="details">
       <h4>فشرده سازی فایل</h4>
       <i class="fa-solid fa-eye"></i>
    </div>
</article>

۲. کد CSS :

article.cards {
    overflow: hidden;
    position: relative
    cursor: pointer;
    border-radius: 4px;
}

article.cards:hover .details {
    opacity: 1;
    height: 100%;
}

.details{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    opacity: 0;
    transition: 0.6s ease;
}

به همین سادگی 🙂