Geek Answers Handbook

Samples of a responsive circle?

I am trying to create a responsive webpage. I used this question and answer to form my circle of icons 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 my images inside a div and put them in a circle so that they become responsive.

Is it possible?

Please, help. Tank you.

I am using bootstrap and html5boilerplate for this project.

I need to make it responsive. , with a smaller viewport, it will look likeon smaller viewport.

+4
1

JsFiddle, https://jsfiddle.net/1et5s06h/, .

FYI Grid system . , , .

( 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>

: , (xs ) , 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;
    }

, : :

  • ( , 1200 ) (lg)
  • ( , 992px ) (md)
  • (, 768px ) ()

:

  • ( 768 ) (xs)

, , , .

+2

More articles:


All Articles