JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        
            <div class="circle-container hidden-xs hidden-sm">
                <div class="row">
                    <span data-scrollreveal="enter top, wait 1.0s">
                        <a href="#" class="center">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" alt="">
                        </a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.2s">
                        <a href="#" class="deg0">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.4s">
                        <a href="#" class="deg45">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.6s">
                        <a href="#" class="deg135">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter left, wait 1.8s">
                        <a href="#" class="deg180">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter left, wait 2.0s">
                        <a href="#" class="deg225">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                   ...

CSS

/* Position icons into sircle */
        .circle-container {
            position: relative;
            width: 35em;
            height: 35em;
            padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
            border: none;
            border-radius: 50%;
            margin: 1.75em auto 0;
        }

            .circle-container a {
                display: block;
                overflow: hidden;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 6em;
                height: 6em;
                margin: -2em; /* 2em = 4em/2 */ /* half the width */
            }

            .circle-container img {
                display: block;
                width: 100%;
            }

        .deg0 {
            transform: translate(18em);
        }
        /* 12em= half the width of the wrapper */
        .deg45 {
            transform: rotate(45deg) translate(18em) rotate(-45deg);
        }

        .deg135 {
            transform: rotate(135deg) translate(18em) rotate(-135deg);
        }

        .deg180 {
            transform: translate(-18em);
        }

        .deg225 {
            transform: rotate(225deg) translate(18em) rotate(-225deg);
        }

        .deg315 {
            transform: rotate(315deg) translate(18em) rotate(-315deg);
        }

        .circle-container a.deg45:hover, a.deg45:activate {
            img-size: 150%;
        }

JavaScript

$("#squere").click(function(){    
    $(".content").hide(800);
    $("#squere").removeClass("active");
    $(this).addClass("active");
     $(this).next(".content").slideDown(1000);
});