JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<div class="jumbotron">
        <div class="circle-container hidden-xs hidden-sm">
                <div class="row">
                    <span class="toogle" 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>
                        <div class="hidden">
                          <a href="#" class="center">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" alt="">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                        </a>
                        </div>
                    </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>
                        <div class="hidden">
                          <a href="#" class="center">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" alt="">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
                        </a>
                        </div>
                    </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>
                        <div...

CSS

/* Position icons into circle */
.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: 50%;
}

.deg0 { transform: translate(12em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.deg180 { transform: translate(-12em); }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }


div.container.hidden-lg.hidden-md div.row div.col-sm-4.col-xs-4 a img.img-circle 
    {
         display:block;margin:10px auto;
    }

/* CSS for the Slide down slide up */

div.hidden{
    display:none;
    position:absolute;
    z-index:1;
    border:1px solid #dedede;
    padding:15px;
    border-radius:4px;
    top:30%;
    color:red;
 }

JavaScript

jQuery(document).ready(function($){
    $('toggle').on('click', function(){
        var content = $(this).parent("span").next("div");
        if (content.is(':visible')) {
            content.slideUp("slow");
        } else {
            content.slideDown("slow");
        }
    });
});