hover ảnh CSS đẹp

 

**** HTML

<div class="post-item">

    <a href="#">

        <div class="post-thumbnail">

            <img src="">

        </div>

    </a>    

</div>

**** CSS

.category-page-single .post-item {

    margin-bottom: 10px;

    padding: 10px;

    background: #fff;

    position: relative;

    border-radius: 10px;

    border: 1px solid #e6e6e6;

    transition-duration: 0.3s;

}

.post-item .post-thumbnail {

    max-width: 290px;

    width: 100%;

    float: left;

    height: 190px;

    transition: 0.3s ease-in-out;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    background-position: center center !important;

    overflow: hidden;

    position: relative;

    display: flex;

    flex-flow: wrap;

    align-items: center;

}

.post-item .post-thumbnail:before {

    content: "";

    background: rgba(255, 255, 255, .25);

    height: 220px;

    left: 100%;

    position: absolute;

    top: 100%;

    width: 100%;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

.post-item:hover .post-thumbnail::before, 

.post-item:hover .post-thumbnail::after {

    left: 0;

    top: 0;

}

.post-item .post-thumbnail img {

    max-width: 100%;

    width: 100%;

    height: 100%;

    transition: 0.3s ease-in-out;

    object-fit: cover !important;

}

/***style***/

.post-item .post-thumbnail img {

    object-fit: fill !important;

}

**** Link

https://www.bkns.vn/lay-du-lieu-tu-website-khac-bang-php.html