Новостной слайдер на Bootstrap — стиль 4

Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №4 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.

html разметка и css стили для реализации блока «Новостной слайдер»

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="news-slider" class="owl-carousel">
                <div class="post-slide">
                    <div class="post-img">
                        <img src="images/img-1.jpg" alt="">
                        <a href="#"><i class="fa fa-link"></i></a>
                    </div>
                    <div class="post-content">
                        <h5 class="post-title"><a href="#">Donec lacinia</a></h5>
                        <p class="post-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque metus, semper at dolor lacinia, scelerisque porttitor est. Quisque ante libero, convallis at dolor molestie, euismod elementum risus. Donec ipsum neque, aliquam eget blandit id, egestas non est. Sed vitae.
                        </p>
                        <ul class="post-bar">
                            <li class="post-date"><i class="fa fa-calendar"></i>3 July 2015</li>
                            <li class="comment"><a href="#"> <i class="fa fa-comment"></i> 3 comment</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.post-slide{
    padding: 0 15px;
}
.post-slide .post-img{
    position: relative;
}
.post-slide .post-img:before{
    content: "";
    position: absolute;
    width: 100%;
    height:100%;
    transition:all 0.5s ease-out 0s;
}
.post-slide .post-img img{
    width: 100%;
    height:auto;
}
.post-slide .post-img:hover:before{
    top:0;
    left:0;
    background: rgba(220, 0, 90, 0.6);
}
.post-slide .post-img a{
    position: absolute;
    top:40%;
    left:40%;
    width: 50px;
    height:50px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #fff;
    opacity: 0;
    transition:all 0.5s ease-out 0s;
}
.post-slide .post-img > a > i{
    position: absolute;
    width: 100%;
    height:100%;
    font-size: 18px;
    color:#fff;
    text-align: center;
    line-height: 47px;
}
.post-slide .post-img a:hover:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: hoverEffect 1.3s ease-out 75ms;
    -webkit-animation: hoverEffect 1.3s ease-out 75ms;
    -moz-animation: hoverEffect 1.3s ease-out 75ms;
}
.post-slide .post-img:hover > a{
    opacity: 1;
}
.post-slide .post-content{
    padding: 20px 15px;
    background: #F6F6F6;
}
.post-slide .post-title > a{
    text-transform: uppercase;
    color:#444;
    font-size: 18px;
    line-height: 28px;
}
.post-slide .post-title > a:hover{
    color:#dc005a;
    text-decoration: none;
}
.post-slide .post-description{
    font-size: 14px;
    color:#444;
    position: relative;
    padding-bottom: 15px;
}
.post-slide .post-description:after{
    content: "";
    position: absolute;
    bottom: 0;
    left:-5%;
    width: 110%;
    border-bottom: 1px solid #999;
    display: block;
}
.post-slide .post-bar{
    padding: 15px 0 0 0;
    list-style: none;
}
.post-slide .post-bar > li{
    display: inline-block;
}
.post-slide .post-date,
.post-slide .comment > a{
    color:#444;
}
.post-slide .post-date > i,
.post-slide .comment i{
    margin-right: 7px;
}
.post-slide .comment{
    float: right;
}
.post-slide .comment > a:hover{
    text-decoration: none;
    color:#dc005a;
}
@-webkit-keyframes hoverEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}
@-moz-keyframes hoverEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
        -moz-transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes hoverEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

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

Теги: