JSFiddle - React, Tailwind, and code Playground

by James Munch

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<br />
<div class="container">
    <div class="row">
        <div class="hidden-xs hidden-sm col-3-md col-3-lg"></div>
        <div class="col-xs-12 col-sm-12 col-6-md col-6-lg featured-container roundy">
            <a href="#"><img src="http://placehold.it/1200x600?text=featured+image" class="img-responsive featured-image roundy" /></a>
        </div>
        <div class="hidden-xs hidden-sm col-3-md col-3-lg"></div>
    </div>
</div>

CSS

.roundy {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.featured-container {
    background-color: #000;
    position: relative;
    margin: 0;
    padding: 0;
}

.featured-image {
	border: 0px solid #fff;
}

.featured-image:hover {
	opacity: 0.6;
}