JSFiddle - React, Tailwind, and code Playground

by steveambielli

HTML

<div class="container">
    <article role="article">
        <div class="big-picture">
            <div id="one" class="target"><img src="http://globetrooper.com/notes/wp-content/uploads/mongolia-landscape.jpg"></div>                
            <div id="two" class="target"><img src="http://www.desertusa.com/images/Gobi_OmnogoviLandscape.jpg"></div>
            <div id="three" class="target"><img src="http://foundtheworld.com/wp-content/uploads/2015/07/Gobi-Desert-6.jpg"></div>
        </div>
        
        <div class="row">
            <div class="col-md-4"><div class="box">
                <a href="#one"><img src="http://globetrooper.com/notes/wp-content/uploads/mongolia-landscape.jpg"></a>
            </div></div>
            <div class="col-md-4"><div class="box">
                <a href="#two"><img src="http://www.desertusa.com/images/Gobi_OmnogoviLandscape.jpg"></a>
            </div></div>
            <div class="col-md-4"><div class="box">
                <a href="#three"><img src="http://foundtheworld.com/wp-content/uploads/2015/07/Gobi-Desert-6.jpg"></a>
            </div></div>
        </div>
    </article>

    <!--<aside role="complimentary">
        <h3>People You May Know</h3>
        <ul>
            <li><a href="#" title="First Last">First Last</a></li>
            <li><a href="#" title="First Last">First Last</a></li>
        </ul>
    </aside>-->
</div>

CSS

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: Helvetiva, Arial, sans serif;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

.container {
    width: 90%;
    margin: 0 auto;
}

.row {   
    margin-bottom: 40px;
    margin-right: -15px;
    margin-left: -15px;
}

.row > .col-md-4 {
    float: left;
    width: 33.333333333%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.row:before {    
    display: table;
    content: " ";
}

.row:after {
    clear: both;
}

.big-picture {
    width: 100%;
    height: 200px;
    background: #f1f1f1;
    border-radius: 4px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    box-shadow: inset 0 1px 5px #ccc;
    text-align: center;
    margin-bottom: 20px;
    line-height: 200px;
    overflow: hidden;
}

    .target {
        display: none;
    }

    .target:target {
        display: block;
    }


.box {
    height: 75px;
    line-height: 50px;
    background: #f1f1f1;
    border-radius: 4px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    box-shadow: inset 0 1px 5px #ccc;
    text-align: center;
    opacity: .5;
    filter: alpha(opacity=50);
    overflow: hidden;
}

    .box:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

aside {
    padding: 20px;
    margin: 20px 0;
    background: #f1f1f1;
    border-radius: 4px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    box-shadow: inset 0 1px 5px #ccc;
    clear: both;
}

aside h3 {
    font-size: 20px; 
    margin: 0 0 5px;
    padding: 0;
}

aside ul {
    padding-bottom: 0;
}

aside ul li a {
    font-size: 14px;
    line-height: 18px;
}

JavaScript

/*jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery('.box').hover(
        function(){
            var $content = jQuery(this).html();
            jQuery('.big-picture').html($content);
        }, function(){
            jQuery('.big-picture').html('');
        }
    );
});*/