Bootstrap 4

by Kolichikov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Welcome to the Russian Community Centre of Vancouver">
            <div class="carousel-title d-flex justify-content-center align-items-center">
                <span>WELCOME TO THE RUSSIAN COMMUNITY CENTRE OF VANCOUVER</span>
            </div>
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="The Christmas Bazaar is coming!">
            <div class="carousel-title d-flex justify-content-center align-items-center">
                <span>THE CHRISTMAS BAZAAR IS COMING</span>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Find out more about our programs">
            <div class="carousel-title d-flex justify-content-center align-items-center">
                <span>FIND OUT MORE ABOUT OUR...

CSS

.carousel-item {
    height: 500px;
}

.carousel-title {
    position: absolute;
    top: 75%;
    bottom: 0;
    background-color: rgba(89,98,117,0.82);
    font-family: Arial;
    font-size:2.5vw;
    width: 100%;
    /*filter: blur(5px);  //this isn't quite the effect that I was looking for
    -webkit-filter: blur(5px);*/
    /*-webkit-backdrop-filter: blur(10px);  these two don't work in browsers yet
    backdrop-filter: blur(10px);*/
    color: white;
}

.carousel-indicators
{
    bottom:inherit;
    top: 70%;
}

.carousel-control-prev, .carousel-control-next
{
    width:5%;
    opacity:inherit;
}
.carousel-indicators li {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 15px;
    height: 15px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    opacity: .5;
    border-radius: 10px;
    transition: opacity 0.6s ease;
    border-top:inherit;
    border-bottom:inherit;
}