JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.backslash.gr/demos/contenthover-jquery-plugin/jquery.contenthover.min.js"></script>
<section id="s-explore">
    <div class="pagebreak"><span>The Lifestyle</span>  <i class="down">&lt;</i>
    </div>
    <div class="wrapper layout">
        <div class="col">
            <div class="media">
                <img id="d1" src="http://placekitten.com/300/300" />
                <div class="contenthover">                  
                  
                    <p><a href="#" class="mybutton">Lorem ipsum</a>
                    </p>
                </div>
            </div>
            
        </div>

CSS

.contenthover{
    color:#fff;
}
.mybutton{    
    padding:20px;
    color:#fff;
    background-color:#000;
    margin:10px;
}

JavaScript

$(function () {
     $(' #d1').contenthover({
         overlay_width: 300,
         overlay_height: 150,
         effect: 'slide',
         slide_direction: 'bottom',
         overlay_x_position: 'center',
         overlay_y_position: 'bottom',
         overlay_background: '#000',
         overlay_opacity: 0.8
     });
 });