news slider style : demo 32

HTML

CSS

                        

                        .post-slide{
                            margin: 0 15px;
                            padding: 0 25px 20px 25px;
                            background: #fff;
                            box-shadow:0 2px 3px rgba(0, 0, 0, 0.07);
                        }
                        .post-slide .post-img{
                            position: relative;
                            margin-bottom: 20px;
                        }
                        .post-slide .post-img img{
                            width: 100%;
                            height: auto;
                        }
                        .post-slide .post-icon{
                            width: 60px;
                            height: 60px;
                            display: block;
                            position: absolute;
                            bottom: 25px;
                            left: 25px;
                            text-align: center;
                            background: #333;
                            opacity: 0;
                            border-radius: 3px;
                            transition: all 300ms ease-in-out 0s;
                        }
                        .post-slide:hover .post-icon{
                            opacity: 1;
                        }
                        .post-slide .post-icon i{
                            font-size: 20px;
                            color: #fff;
                            line-height: 60px;
                        }
                        .post-slide .post-bar{
                            margin: 0;
                            padding: 0;
                            list-style: none;
                            text-transform: uppercase;
                        }
                        .post-slide .post-bar li{
                            display: inline-block;
                            font-size: 15px;
                            color: #676767;
                            margin-right: 5px;
                        }
                        .post-slide .post-bar li:after{
                            content: "/";
                            margin-left: 5px;
                        }
                        .post-slide .post-bar li:last-child:after{
                            content: "";
                        }
                        .post-slide .post-bar li a{
                            color: #8e44ad;
                            transition: all 0.3s ease 0s;
                        }
                        .post-slide .post-bar li a:hover{
                            color: #333;
                            text-decoration: none;
                        }
                        .post-slide .post-bar li a:after{
                            content: ",";
                            margin: 0 5px;
                        }
                        .post-slide .post-bar li a:last-child:after{
                            content: "";
                        }
                        .post-slide .post-title{
                            margin: 15px 0;
                            text-transform: capitalize;
                        }
                        .post-slide .post-title a{
                            font-size: 22px;
                            font-weight: 600;
                            color: #3c3c3c;
                            transition: all 300ms linear 0ms;
                        }
                        .post-slide .post-title a:hover{
                            color: #8e44ad;
                            text-decoration: none;
                        }
                        .post-slide .post-description{
                            font-size: 16px;
                            color: #676767;
                            line-height: 24px;
                            padding-bottom: 15px;
                        }
                        .post-slide .read-more{
                            display: inline-block;
                        }
                        .post-slide .read-more:hover{
                            text-decoration: none;
                        }
                        .post-slide .read-more i{
                            font-size: 19px;
                            color: #333;
                            margin-right: 5px;
                            transition: all 0.40s linear 0s;
                        }
                        .post-slide .read-more span{
                            font-size: 16px;
                            color: #333;
                            opacity: 0;
                            text-transform: uppercase;
                            transition: all 0.40s linear 0s;
                        }
                        .post-slide .read-more:after{
                            content: "";
                            display: block;
                            width: 40%;
                            position: relative;
                            bottom: -20px;
                            border-bottom: 3px solid #333;
                            opacity: 0;
                            transition: all 0.40s linear 0s;
                        }
                        .post-slide:hover .read-more span,
                        .post-slide:hover .read-more:after{
                            opacity: 1;
                        }
                        .post-slide .read-more:hover span,
                        .post-slide .read-more:hover i,
                        .post-slide .read-more:hover:after{
                            color: #8e44ad;
                            border-bottom-color: #8e44ad;
                        }

JavaScript

(News slider depend on jQuery and Owl carousel.) 
                        
                        

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