Responsive Circle images?

Question

I am trying to make an responsive web page. I have used this question and answer, to form mine icon circle for this project. But I would like to make it more responsive, because I need to wrap some jQuery toggle() inside.

<div class="jumbotron">
    <div class="circle-container">
        <div class="row">

            <span data-scrollreveal="enter top, wait 1.0s">
              <a href="#" class="center hvr-grow"><img src="img/specialoffers.jpg" class="img-circle" alt="">
              </a>
            </span>

            <span data-scrollreveal="enter right, wait 1.2s">
              <a href="#" class="deg0"><img src="img/circle/special.png" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter right, wait 1.4s">
              <a href="#" class="deg45"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter right, wait 1.6s">
              <a href="#" class="deg135"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter left, wait 1.8s">
              <a href="#" class="deg180"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter left, wait 2.0s">
              <a href="#" class="deg225"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>   
 /* 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%; }
                  </span>

                  <span data-scrollreveal="enter left, wait 2.2s">
                    <a href="#" class="deg315"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
                  </span>


              </div>
          </div><!--end circle-container-->
      </div>

CSS for this div:

/* 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%; }

I want to wrap mine images inside div's and position them to form the circle, so they become responsive.

Is that possible?

Please Help. Tank you.

I am using bootstrap and html5boilerplate for this project.

I need to make this to be responsive., on smaller viewport it would look like this on smaller viewport.

want to make it responsive for smaller viewports, mobile, fablet, tablet, etc.. — copser, Apr 06 '15 at 05:19
I have edit mine question, you have two pictures, one for desktop version, and one for smaller viewports — copser, Apr 06 '15 at 05:26
Have you considered using [CSS Media queries](https://css-tricks.com/css-media-queries/) ? And I believe that misplaced css inside your html is there by mistake right? — wooer, Apr 06 '15 at 05:39
Yes it is by mistake, I have consider it, but I am having a hard time wrapping it to be responsive, I am searching for the best way, can you elaborate, pls? — copser, Apr 06 '15 at 05:44
@subas_poudel, here the proper link for the [circle div](http://dabblet.com/gist/3864650) — copser, Apr 06 '15 at 05:46

wooer · Accepted Answer · 2015-04-06T12:30:18.173

Can you check the JsFiddle I created for you https://jsfiddle.net/1et5s06h/ to check try to resize the preview pane.

FYI my answer depends on bootstrap's Grid system and Responsive utilities. You may want to read them to get a better understanding of the grid system and responsive utility classes and to customize my answer to better fit into your needs.

Refer to the below code (that uses your css):

 <div class="jumbotron">
            <div class="circle-container hidden-xs hidden-sm">
                <div class="row">
                    <span data-scrollreveal="enter top, wait 1.0s">
                        <a href="#" class="center hvr-grow">
                            <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>
                    </span>

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

                </div>
            </div>
            <!--end circle-container-->
            <div class='container hidden-lg hidden-md '>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">Strange book here :)</div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
            </div>
        </div>

Update: I made a little enhancement here that is to show grid interface only in extra small devices (xs) and centered the images within their containers by adding the following css:

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

and I thought I'd better state the idea behind my answer more vivid: I basically create two instances of your content and using responsive utility classes I made your circle of images visible for:

Large devices (large desktops, 1200px and up) (lg)
Medium devices (desktops, 992px and up) (md)
Small devices (tablets, 768px and up) (sm)

and hide circle placement and made grid placement visible in:

Extra small devices (phones, less than 768px) (xs)

Of course, to emphasize again, my update note explains the altered code presented here.

Can you advise me, the best way to put mine paper.gif in the footrest of the picture, tnx for the example, I am using it for mine web site, I am juts going to change it a little. — copser, Apr 07 '15 at 05:16
I haven't seen a paper.gif image in your code, do you mean the book picture? And you're welcome, glad that I helped. — wooer, Apr 07 '15 at 05:21
[this is it](http://i.stack.imgur.com/2Q0IH.jpg), this is what i want to make on bigger screen, the paper is on the bootom, and I will put a jquery toogle() for it. — copser, Apr 07 '15 at 05:52
This seems like the subject of another question but to state a quick idea: you need to alter the src (or the css class that identifies the background image) as a quick search would give you [this question](http://stackoverflow.com/questions/19057513/toggling-an-image-src-with-jquery) — wooer, Apr 07 '15 at 06:04
so, the bottom line is that I should approach this problem whit changing this images whit css background and jQuery, yes this is superb answer, tank you once again ~:) — copser, Apr 07 '15 at 10:19
Among all a lot of others, this is an option fro you to choose, thank you @Nadeem and you're welcome Petar Pilipovic. — wooer, Apr 07 '15 at 13:08
@wooer, I have post a question about what I haved asked you, can you check mine [edit] (http://stackoverflow.com/questions/29506527/how-to-hover-change-toggle-a-picture-with-jquery/29508895#29508895), section. — copser, Apr 09 '15 at 06:49

Responsive Circle images?

1 Answers1