hover effect style : demo 74

                        

                            

                                

                                    

                                        
                                        

                                            
Williamson
                                            web designer
                                        
                                        

                                            

                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, asperiores eaque error excepturi, expedita facere fuga iure magni modi quam repellat reprehenderit.
                                            
                                            Read More 
                                        
                                    
                                

                                

                                    

                                        
                                        

                                            
Kristiana
                                            Web Developer
                                        
                                        

                                            

                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, asperiores eaque error excepturi, expedita facere fuga iure magni modi quam repellat reprehenderit.
                                            
                                            Read More 
                                        
                                    
                                
                            
                        
                    

                        .box{
                            position: relative;
                            overflow: hidden;
                            box-shadow: 0 0 5px #555;
                        }
                        .box img{
                            width: 100%;
                            height: auto;
                        }
                        .box .box-heading{
                            width: 90%;
                            position: absolute;
                            bottom: 25px;
                            left: 5%;
                            background: rgba(7, 185, 244,0.8);
                            padding: 10px 60px 10px 25px;
                            color: #fff;
                            transition: all 0.3s ease 0s;
                        }
                        .box:hover .box-heading{
                            left: 100%;
                        }
                        .box .box-heading:after{
                            content: "\f105";
                            font-family: "Font Awesome 5 Free";
                            font-weight: 900;
                            width: 40px;
                            height: 40px;
                            line-height: 40px;
                            position: absolute;
                            top: 13px;
                            right: 11px;
                            background: #20211c;
                            font-size: 30px;
                            color: #fff;
                            text-align: center;
                        }
                        .box .title{
                            margin: 0;
                            font-size: 18px;
                            font-weight: bold;
                        }
                        .box .post{
                            display: block;
                            font-size: 14px;
                            color: #fff;
                            text-transform: capitalize;
                            margin-top: 5px;
                        }
                        .box .boxContent{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: -100%;
                            padding: 30px 35px;
                            background: rgba(7, 185, 244,0.8);
                            transition: all 0.3s ease 0s;
                        }
                        .box:hover .boxContent{
                            left: 0;
                        }
                        .box .description{
                            font-size: 14px;
                            color: #fff;
                            line-height: 25px;
                        }
                        .box .read{
                            display: inline-block;
                            padding: 10px 20px;
                            background: #20211c;
                            font-size: 14px;
                            font-weight: 700;
                            color: #fff;
                            margin-top: 20px;
                            transition: all 0.3s ease 0s;
                        }
                        .box .read:hover{
                            text-decoration: none;
                            background: #fff;
                            color: #3fc9f7;
                        }
                        .box .read i{
                            font-size: 20px;
                            font-weight: 700;
                            margin-left: 10px;
                        }
                        @media only screen and (max-width: 990px){
                            .box{ margin-bottom: 20px; }
                        }
                        @media only screen and (max-width: 479px){
                            .box .boxContent{ padding: 10px; }
                            .box .read{ margin-top: 10px; }
                        }