hover effect style : demo 41

Web designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, porro.

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, porro.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, porro.

HTML

                        

Web designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, porro.

CSS

                        .box {
                             overflow: hidden;
                             position: relative;
                             box-shadow:0 0 5px #808080;
                        }
                        .box:before,
                        .box:after{
                            content: "";
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width:50%;
                            height:100%;
                            background: #85b141;
                            transform: translateY(-100%);
                            transition: all 0.3s ease 0s;
                        }
                        .box:after{
                            left:50%;
                            transform: translateY(100%);
                            transition-delay: 0.1s;
                        }
                        .box:hover:after,
                        .box:hover:before{
                            transform: translateY(0);
                        }
                        .box img{
                            width: 100%;
                            height:auto;
                        }
                        .box .box-content{
                            width: 100%;
                            position: absolute;
                            top: 30px;
                            left: 0;
                            padding: 40px 20px;
                            color:#fff;
                            text-align:center;
                            z-index: 1;
                        }
                        .box .title{
                            font-size:24px;
                            text-transform: uppercase;
                            margin: 0 0 20px 0;
                            transform: translateX(-110%);
                            transition: all 0.40s linear 0.1s;
                        }
                        .box .description{
                            font-size:14px;
                            transform: translateX(110%);
                            transition: all 0.40s linear 0.1s;
                        }
                        .box:hover .title,
                        .box:hover .description{
                            transform:translateX(0%);
                            transition-delay: 0.35s;
                        }
                        @media only screen and (max-width:990px) {
                           .box{ margin-bottom:20px; }
                        }
                        @media only screen and (max-width:479px) {
                            .box .box-content{ padding: 10px 20px; }
                        }
                    
License Terms