news slider style : demo 3

HTML

                    

                        

                            

                                

                                    

                                        

                                            
                                        
                                        
Aliquam rutrum
                                        

                                            
 june 5, 2015
                                            
   admin
                                        
                                        

                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices felis in orci condimentum, at viverra nulla pulvinar. Donec diam nisl.
                                        
                                    
                                
                            
                        
                    
                

CSS

                    
                    

                    .post-slide{
                        padding: 0 15px;
                    }
                    .post-slide .post-img{
                        position: relative;
                    }
                    .post-slide .post-img > a{
                        display:block;
                    }
                    .post-slide .post-img img{
                        width: 100%;
                        height:auto;
                    }
                    .post-slide .post-img:hover:before{
                        content: "";
                        position: absolute;
                        width: 100%;
                        height:100%;
                        background-color: rgba(220, 0, 90, 0.6);
                    }
                    .post-slide .post-img:after{
                        content: "\f065";
                        font-family: "Font Awesome 5 Free"; font-weight: 900;
                        position: absolute;
                        top:17px;
                        right:20px;
                        color:#fff;
                        opacity: 0;
                        transform: scale(0.8);
                        transition:all 0.3s linear 0s;
                    }
                    .post-slide .post-img:hover:after{
                        opacity: 1;
                        transform: scale(1);
                    }
                    .post-slide .post-title{
                        margin-top: 20px;
                    }
                    .post-slide .post-title > a{
                        color:#222;
                        display: block;
                        font-size: 17px;
                        font-weight: 600;
                        text-transform: uppercase;
                    }
                    .post-slide .post-title > a:hover{
                        text-decoration: none;
                        color:#dc005a;
                    }
                    .post-slide .post-bar{
                        padding: 0;
                        list-style: none;
                    }
                    .post-slide .post-bar > li{
                        display: inline-block;
                    }
                    .post-slide .post-date,
                    .post-slide .author,
                    .post-slide .author > a{
                        color:#8f8f8f;
                        font-size: 12px;
                        margin-right: 16px;
                        text-transform: uppercase;
                        font-style: italic;
                    }
                    .post-slide .post-date > i,
                    .post-slide .author > i{
                        margin-right: 5px;
                    }
                    .post-slide .author > a:hover{
                        color:#dc005a;
                    }
                    .post-slide .post-description{
                        color:#8f8f8f;
                        font-size: 14px;
                        line-height: 24px;
                        padding-top: 5px;
                    }
                    .post-slide .post-description:before{
                        content: "";
                        display: block;
                        border-top: 4px solid #dc005a;
                        padding-bottom: 12px;
                        width: 50px;
                    }
                    .owl-theme .owl-controls .owl-page span{
                        width: 52px;
                        height:5px;
                        border-radius: 0;
                        opacity: 0.5;
                        margin-bottom: 0;
                    }
                    .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{
                        background: #dc005a;
                        opacity: 1;
                    }
                

JavaScript

News slider depend on jQuery and Owl carousel.

                    
                    

                    $(document).ready(function() {
                        $("#news-slider").owlCarousel({
                            navigation : false,
                            pagination : true,
                            items : 3,
                            itemsDesktop:[1199,3],
                            itemsDesktopSmall:[980,2],
                            itemsMobile : [600,1],
                            navigationText : ["",""]
                        });
                    });