JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<section class="carousel-wrapper">
    <div class="container">
        <div class="row">

            <ul class="col-md-12 carousel text-center">
                <li>
                    <a href="#">
                        <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-content">
                                <h4>content</h4>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-content">
                                <h4>content</h4>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-content">
                               ...

CSS

.carousel-wrapper {
    background-color: rgb(235, 235, 235);
    position: relative;
}

img {
  background-color: black;
}

.slick-slide {
    text-align: center !important;
}

.overlay {
    position: absolute;
    height: 100%;
    width:100%;
    top: 0;
    left: 0;
    background: rgba(1, 1, 1, .35);
    transition: 0.2s;
    opacity: 0;
}

.overlay:hover {
    opacity: 1;
}

.overlay-content {
    color: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
}

JavaScript

$('.carousel').slick({
		arrows: false,
    dots: true,
    slidesPerRow: 3,
    rows: 3
});