JSFiddle - React, Tailwind, and code Playground

Hover/Focus Style Tests

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<main>
    <h1>Hover/Focus Style Tests</h1>
    
    <a href="#">
        <img src="http://placehold.it/340x255/444444/333333" width="340" height="255" alt="" />
        <div>
            <h2>
                20 things you need to know for the year ahead
            </h2>
            <p>
                Space
            </p>
        </div>
    </a>
    
    <a href="#">
        <img src="http://placehold.it/340x255/666666/555555" width="340" height="255" alt="" />
        <div>
            <h2>
                Pluto&#8217;s first close-up
            </h2>
            <p>
                Space
            </p>
        </div>
    </a>
    
    <a href="#">
        <img src="http://placehold.it/340x255/444444/333333" width="340" height="255" alt="" />
        <div>
            <h2>
                Lisa Kaltenegger
            </h2>
            <p>
                Space
            </p>
        </div>
    </a>
    
    <a href="#">
        <img src="http://placehold.it/340x255/666666/555555" width="340" height="255" alt="" />
        <div>
            <h2>
                Ready to start body hacking?
            </h2>
            <p>
                Health
            </p>
        </div>
    </a>
    
    <a href="#">
        <img src="http://placehold.it/340x255/444444/333333" width="340" height="255" alt="" />
        <div>
            <h2>
                Synthetic biology on our shelves
            </h2>
            <p>
                Life
            </p>
        </div>
    </a>
    
    <a href="#">
        <img src="http://placehold.it/340x255/666666/555555" width="340" height="255" alt="" />
        <div>
            <h2>
                Alice...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

body {
    background: #272727;
    font-size: 100%;
    color: #fff;
    font-family: Lato, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

main {
    position: relative;
    padding: 0 0 2em 0;
    margin: 0 0 2em 0;
}

main::after {
    content: "";
    display: block;
    clear: both;
}

h1 {
    margin: 1em;
    text-align: center;
}

a {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /*border: 1px dotted #f00;*/
    position: relative;
    width: 50%;
    float: left;
    color: #fff;
    font-size: 75%;
    /*overflow: hidden;*/
    transition: all 0.25s ease-in;
}

a img {
    width: 100%;
    height: auto;
    display: block;
    z-index: 15;
}

a::after {
    content: "";
    display: block;
    box-sizing: border-box;
    background: url(http://newscientistprojects.com/wp-content/themes/wowway/images/buttons.png) no-repeat -186px 5px #faa619;
    border-radius: 100%;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
    width: 2em;
    height: 2em;
    position: absolute;
    left: 50%;
    bottom: 7em;
    margin-left: -1em;
    z-index: 10;
    opacity: 0;
    transition: all 0.35s ease-in;
    /*opacity: 0;*/
}

a div {
    box-sizing: border-box;
    padding: 0 1em;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    /*border: 1px dotted yellow;*/
    opacity: 0;
    background: #272727;
    transition: all 0.25s ease-in;
}

a h2 {
    margin: 1em 0 0 0;
    font-size: 125%;
}

a p {
    margin: 1em 0;
    color: #737373;
}

a:hover, a:focus {
    z-index: 5;
    margin-top: -5em;
    padding-bottom: 5em;
    outline: none;
}

a:hover::after, a:focus::after {
    bottom: 4em;
    opacity: 1;
}

a:hover div, a:focus div {
    opacity: 1;
    bottom: -3em;
}

@media screen and (min-width:600px) {
    
    a {
        width: 33.333333%;
    }
    
}

@media screen and (min-width:800px) {
    
    a {
        width:...

JavaScript

// Bootstrap v3.3.1
// Font Awesome 4.2.0