hover effect style : demo 10

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur.

Vestibulum vel arcu

Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur.

Vestibulum vel arcu

Lorem ipsum dolor sit amet, consectetur.

HTML

                        

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur.

CSS

                        .box{
                            position:relative;
                            overflow: hidden;
                        }
                        .box .box-img{
                            transform: translateX(0px);
                            transition:transform 0.40s linear ;
                        }
                        .box:hover .box-img{
                            transform: translateX(100%);
                        }
                        .box .box-img img{
                            width: 100%;
                            height: auto;
                        }
                        .box .content{
                            position: absolute;
                            top:0;
                            right: 100%;
                            width:100%;
                            height:100%;
                            padding:5%;
                            text-align:center;
                            background:#e67e22;
                            transition:right 0.40s linear;
                        }
                        .box:hover .content{
                            right:0%;
                        }
                        .box .title{
                            font-size:18px;
                            text-transform:capitalize;
                            color:#fff;
                            margin: 5% 0 0;
                        }
                        .box .description{
                            color:#fff;
                        }
                        .box .title:after,
                        .box .description:after{
                            content: "";
                            border-bottom: 1px solid #fff;
                            display: block;
                            margin:3% auto;
                            width: 57%;
                        }
                        .box .social-links{
                            padding:0;
                            margin:0;
                        }
                        .box .social-links li{
                            list-style:none;
                            display:inline-block;
                            margin-right:15px;
                        }
                        .box .social-links li a{
                            color:#fff;
                            font-size:18px;
                        }
                        @media only screen and (max-width: 990px) {
                            .box{
                                margin-bottom:20px;
                            }
                        }
                    
License Terms