hover effect style : demo 6

HTML

                    

CSS

                    .box{
                        position: relative;
                        text-align: center;
                        overflow: hidden;
                    }
                    .box .box-img{
                        position: relative;
                    }
                    .box .box-img > img{
                        width: 100%;
                        height: auto;
                    }
                    .box .box-img:before{
                        content: "";
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.5);
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 1;
                        transition: all 0.5s ease 0s;
                    }
                    .box:hover .box-img:before{
                        opacity: 1;
                    }
                    .box .link{
                        position: absolute;
                        top:0;
                        left:0;
                        width: 100%;
                        height:100%;
                    }
                    .box .link a{
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 50%;
                        background: #fff;
                        color: #00afff;
                        position: relative;
                        top:45%;
                        display: inline-block;
                        font-size: 16px;
                        transform: rotateZ(180deg);
                        transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
                    }
                    .box .link a:hover{
                        text-decoration: none;
                        color:#718873;
                    }
                    .box:hover .link a{
                        transform: rotateZ(0deg);
                    }
                    .box .link .fa-plus{
                        transform-origin: -190% 50% 0;
                    }
                    .box .link .fa-search{
                        transform-origin: 300% 50% 0;
                    }
                    @media only screen and (max-width: 990px){
                        .box{
                            margin-bottom: 20px;
                        }
                    }
                    @media only screen and (max-width: 767px){
                        .box .link .fa-plus{
                            transform-origin: -400% 50% 0;
                        }
                        .box .link .fa-search{
                            transform-origin: 500% 50% 0;
                        }
                    }
                    @media only screen and (max-width: 480px){
                        .box .link .fa-plus{
                            transform-origin: -250% 50% 0;
                        }
                        .box .link .fa-search{
                            transform-origin: 350% 50% 0;
                        }
                    }