JSFiddle - React, Tailwind, and code Playground

by teknoblogo

HTML

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/standalone.css">
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/overlay-basic.css">
<div id="triggers">
    <img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/>
    <img src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" rel="#mies2"/>
</div>

<!-- overlays -->
<div class="simple_overlay" id="mies1">
    <iframe title="YouTube video player" width="640" height="510" src="http://www.youtube.com/embed/8PTgnEmlLWI?rel=0" frameborder="0" allowfullscreen></iframe>


    <div class="details">
        <h3>The Barcelona Pavilion</h3>

        <h4>Barcelona, Spain</h4>

        <p>
            The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. It was an important building in the history of modern architecture.
        </p>

        <p>
            Several critics, historians and modernists have declared it "the most beautiful building of the century"
        </p>
    </div>
</div>

CSS

/* some styling for triggers */
    #triggers {
        text-align:center;
    }
    
    #triggers img {
        cursor:pointer;
        margin:0 5px;
        background-color:#fff;
        border:1px solid #ccc;
        padding:2px;
    
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        
    }
    
    
    
    /* styling for elements inside overlay */
    .details {
        position:absolute;
        top:15px;
        right:15px;
        font-size:11px;
        color:#fff;
        width:150px;
    }
    
    .details h3 {
        color:#aba;
        font-size:15px;
        margin:0 0 -10px 0;
    }

JavaScript

$(document).ready(function() {



$("img[rel]").overlay();
});