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://gregjustice.com/wp-content/uploads/2014/10/greg-fox-news-300x168.jpg" width="300" height="240" />
                <div class="contenthover">
                     <h3>Lorem ipsum dolor</h3>

                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames</p>
                    <p><a href="#" class="mybutton">Lorem ipsum</a>
                    </p>
                </div>
            </div>
            <div class="body">
                 <h1>Vestibulum</h1>

                 <h2>quis<br />Vestibulum</h2>

            </div>
        </div>

CSS

.contenthover{
    color:white;
}

JavaScript

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