JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<div class="slidein-caption" style="background-image: url(http://lorempixel.com/529/240/animals/)">
    <div>
        <a href="#" class="feature_image_link youtube-video" data-video-id="WH4zWQ5jsnI" target="_blank">
                
                 
                  <h2 class="header header-sub header-large header-feature-image">SDN Decoded: The Series</h2>
                  <p class="paragraph-medium">Part 1: Defining SDN</p>
         
              </a>
    </div>
</div>

CSS

.slidein-caption {
    position: relative;
    width: 529px;
    height: 240px;
    overflow: hidden;
}

.slidein-caption > div {
    background-color: rgba(0,0,0,0.75);
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    left: 0;
    -webkit-transition: opacity 0.3s linear;
    /* text-shadow: #000 1px 1px 0;
    color: #ccc; */
}
.slidein-caption:hover > div {
    display: block;
    opacity: 1.0;
}
.thumb > div div {
    padding: 20px 40px;
}
.thumb h2 {
    font-size: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.thumb p {
    margin-bottom: 10px;
}