JSFiddle - React, Tailwind, and code Playground

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="container">
              <div class="row">
                  <div class="col-sm-4 col-xs-4">
                  
                        <a href="#" class="center">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
                        </a>
                        <div class="content">
                            Content Image 1
                        </div>
                    
                  </div>
                  <div class="col-sm-4 col-xs-4">
                        <a href="#" class="center">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
                      </a>
                      <div class="content">
                            Content Image 2
                        </div>

                    </div>
                  <div class="col-sm-4 col-xs-4">
                        <a href="#" class="center">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/></a>
                      <div class="content">
                            Content Image 3
                        </div>
                    </div>
                     
    </div>    
</div>

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

$(document).ready(function(){
   $('.content').hide();
});

$(document).on('click',".center",function(){ 
    $(".content").slideUp(300);
    if ($(this).next(".content").is(':hidden')) {
        $(this).next(".content").slideDown(300);
    }
});