.post-slide{ margin: 0 10px; border-left: 8px solid #1dcfd1; border-bottom: 8px solid #1dcfd1; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2); } .post-slide .post-img{ position: relative; overflow: hidden; } .post-slide .post-img:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0,0,0.0); transition: all 0.40s linear 0s; } .post-slide:hover .post-img:before{ background: rgba(0, 0,0,0.6); } .post-slide .post-img img{ width: 100%; height: auto; } .post-slide .post-info{ width: 75%; position: absolute; bottom: -100%; left: 12.5%; background: #1dcfd1; text-align: center; line-height: 26px; padding: 15px; transition: bottom 0.40s ease-in-out 0s; } .post-slide:hover .post-info{ bottom:0; } .post-slide .category{ padding: 0; margin: 0; list-style: none; } .post-slide .category li, .post-slide .post-date{ display: inline-block; font-size: 16px; color: #fff; text-transform: capitalize; } .post-slide .category li:after{ content: " /"; } .post-slide .category li:last-child:after{ content: ""; } .post-slide .category li a{ color: #fff; transition: all 0.40s linear; } .post-slide .category li a:hover{ color: #555; text-decoration: none; } .post-slide .post-review{ padding: 35px 20px 25px; background: #fff; position: relative; } .post-slide .icons{ width: 90px; height: 90px; border: 4px solid #fff; border-radius: 50%; position: absolute; top: -45px; right: 10px; overflow: hidden; } .post-slide .icons img{ width: 100%; height: auto; } .post-slide .post-title{ margin: 0 0 25px 0; } .post-slide .post-title a{ font-size: 16px; font-weight: bold; letter-spacing: 2px; color: #1dcfd1; display: inline-block; text-transform: uppercase; transition: all 0.30s linear 0s; } .post-slide .post-title a:hover{ text-decoration: none; color: #555; } .post-slide .post-description{ color: #555; font-size: 15px; line-height: 26px; margin-bottom: 20px; } .post-slide .read{ font-size: 13px; color: #555; display: block; text-align: right; text-transform: uppercase; } .post-slide .read:hover{ text-decoration:none; color: #1dcfd1; }
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 3, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [600,1], pagination:false, navigationText:false }); });