hover effect style : demo 56

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur delectus quae quod recusandae repudiandae.

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur delectus quae quod recusandae repudiandae.

Graphic Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur delectus quae quod recusandae repudiandae.

HTML

                        

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur delectus quae quod recusandae repudiandae.

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur delectus quae quod recusandae repudiandae.

CSS

                        .box{
                            position: relative;
                            overflow: hidden;
                            border: 1px solid #d3d3d3;
                        }
                        .box img{
                            width: 100%;
                            height: auto;
                        }
                        .box .icon{
                            width: 70px;
                            height: 70px;
                            padding: 22px 25px;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            font-size: 20px;
                            color: #fff;
                            background:rgba(0,0,0,0.8);
                            transition: all 0.50s ease 0s;
                        }
                        .box .icon:hover{
                            width: 100%;
                            height: 100%;
                            padding: 22px 0 0 88%;
                        }
                        .box .box-content{
                            width: 0;
                            height: 0;
                            position: absolute;
                            bottom: 0;
                            left: -100%;
                            text-align: center;
                            opacity: 0;
                            transition: all 0.7s ease 0s;
                        }
                        .box .icon:hover .box-content{
                            width: 100%;
                            height: 100%;
                            left: 0;
                            padding: 25% 10%;
                            opacity: 1;
                        }
                        .box .box-content i{
                            font-size: 30px;
                        }
                        .box .title{
                            font-size: 24px;
                        }
                        .box .description{
                            font-size: 15px;
                        }
                        @media only screen and (max-width: 990px) {
                            .box{ margin-bottom: 20px; }
                        }
                    
License Terms