hover effect style : demo 9

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.

read more

Vestibulum vel arcu sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.

read more

Vestibulum vel arcu sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.

read more

HTML

                        

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.

read more

CSS

                        .box{
                            overflow:hidden;
                            position:relative;
                        }
                        .box .box-img img{
                            width: 100%;
                            height: auto;
                        }
                        .box .content{
                            width: 100%;
                            height: 100%;
                            padding:60px 30px;
                            background:rgba(71,162,222,0.8);
                            position: absolute;
                            top: 0;
                            left: -100%;
                            transition:all 0.50s ease 0s;
                        }
                        .box:hover .content{
                            left:0;
                        }
                        .box .title{
                            font-size:18px;
                            color:#fff;
                            text-transform:capitalize;
                            font-weight: bold;
                            margin:0 0 30px 0;
                        }
                        .box .description{
                            font-size:16px;
                            color:#fff;
                            margin-bottom:35px;
                        }
                        .box .read-more{
                            padding:7px 15px;
                            background:#333;
                            color:#fff;
                            text-transform: capitalize;
                        }
                        @media only screen and (max-width: 990px){
                            .box{
                                margin-bottom:20px;
                            }
                        }
                        @media only screen and (max-width: 480px){
                            .box .content{
                                padding: 20px 30px;
                            }
                        }
                    
License Terms