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

button - right - web đẹp

 

****HTML

<div class="btn-phone" style="bottom: 240px;">   
    <a href="tel:0909 999999">
            <i class="fa fa-phone"></i>
    </a>
</div>

****CSS

.btn-phone {

    position: fixed;

    left: auto;

    bottom: 100px;

    z-index: 99;

    right: 20px;

}

.btn-phone a {

    background: #dc3545;

    border-radius: 50%;

    box-shadow: -2px 0px 8px -3px black;

    display: block;

    line-height: 53px;

    text-align: center;

    width: 45px;

    height: 45px;

}

.btn-phone a i {

    font-size: 24px;

    color: #fff;

}

.btn-phone a:after {

    content: '';

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background-color: inherit;

    border-radius: inherit;

    -webkit-animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;

    animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;

    z-index: -1;

}

.btn-phone:hover span.number-phone, .btn-phone:focus span.number-phone{

    transform: scaleX(1);

} 

@keyframes pulse-animation{

    0%{

        transform: scale(1);

        opacity: .6;

    }

    40%{

        transform: scale(1.3);

        opacity: .6;

    }

    100%{

        transform: scale(2);

        opacity: 0;

    }

}

.ctrlq.fb-button{

    z-index: 999; 

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff; 

    width: 40px; 

    height: 40px; 

    text-align: center; 

    bottom: 90px; 

    border: 0; 

    outline: 0;

    border-radius: 60px; 

    -webkit-border-radius: 60px; 

    -moz-border-radius: 60px; 

    -ms-border-radius: 60px; 

    -o-border-radius: 60px; 

    box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16); 

    -webkit-transition: box-shadow .2s ease; 

    background-size: 80%; transition: all .2s ease-in-out;

    position: fixed;

    left: 27px;

}

.ctrlq.fb-button:focus, .ctrlq.fb-button:hover{

    transform: scale(1.1); 

    box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24)

}