Twitter Bootstrap Question posted in

Is it possible to put arrows between these flipping circles?-Twitter bootstrap

I’ve created 5 circles in HTML and CSS which flip on mouse hover. Those 5 circles contain 5 processes. I want arrows between these processes which help show the sequence of the circles. Can someone help me put right arrows between these circles?

These are the 5 processes.
5 processes

This is my code:

$(document).ready(function() {
  $('.hover').hover(function() {
    $(this).addClass('flip');
  }, function() {
    $(this).removeClass('flip');
  });
});
.col_half {
  width: 49%;
}

.col_third {
  width: 32%;
}

.col_fourth {
  width: 23.5%;
}

.col_fifth {
  width: 18.4%;
}

.col_sixth {
  width: 15%;
}

.col_three_fourth {
  width: 74.5%;
}

.col_twothird {
  width: 66%;
}

.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
  position: relative;
  display: inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}

.end {
  margin-right: 0 !important;
}


/*-=-=-=-=-=-=-=-=-=-=- */


/* Flip Panel */


/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper {
  width: 980px;
  margin: 0 auto;
  background-color: #bdd3de;
  hoverflow: hidden;
}

.panel1 {
  margin: 0 auto;
  height: 130px;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}

.panel1 .front,
.panel1 .back {
  text-align: center;
}

.panel1 .front {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 900;
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel1 .back {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 1000;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel1.flip .front {
  z-index: 900;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.panel1.flip .back {
  z-index: 1000;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
}

.box1 {
  background-color: #1d1c1c;
  width: 158px;
  height: 160px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.box2 {
  background-color: #000000;
  width: 158px;
  height: 160px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.myp {
  padding-top: 28px;
  font-size: 18px;
  text-align: center;
  color: rgb(197, 0, 7)!important;
  font-family: 'Amperzand'!important;
}

.myp1 {
  padding-top: 28px;
  font-size: 18px;
  text-align: center;
  color: rgb(197, 0, 7)!important;
  font-family: 'Open Sans', sans-serif!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="team1" id="team" style="background-color: #484848;">
  <div class="container">
    <div class="wrapper">
      <div class="col-lg-1">
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Consulting</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Consulting</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Planning</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Planning</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Architectural Designing</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Architectural Designing</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Construction Management</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Construction Management</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp">Happy Living</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Final Delivery</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1 agile_team_grid">
      </div>
    </div>
  </div>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

I want arrows between these 5 circles.like this .Can someone help me?

Tags:

2

Answers


  1. 0

    I think this is what you’d need… the key was .fa-arrow-right { position: absolute; right: -5px; top: 50%; }

    $(document).ready(function() {
  $('.hover').hover(function() {
    $(this).addClass('flip');
  }, function() {
    $(this).removeClass('flip');
  });
});
    .fa-arrow-right {
  position: absolute;
  right: -5px;
  top: 50%;
}

.col_half {
  width: 49%;
}

.col_third {
  width: 32%;
}

.col_fourth {
  width: 23.5%;
}

.col_fifth {
  width: 18.4%;
}

.col_sixth {
  width: 15%;
}

.col_three_fourth {
  width: 74.5%;
}

.col_twothird {
  width: 66%;
}

.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
  position: relative;
  display: inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}

.end {
  margin-right: 0 !important;
}


/*-=-=-=-=-=-=-=-=-=-=- */


/* Flip Panel */


/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper {
  width: 980px;
  margin: 0 auto;
  background-color: #bdd3de;
  hoverflow: hidden;
}

.panel1 {
  margin: 0 auto;
  height: 130px;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}

.panel1 .front,
.panel1 .back {
  text-align: center;
}

.panel1 .front {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 900;
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel1 .back {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 1000;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel1.flip .front {
  z-index: 900;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.panel1.flip .back {
  z-index: 1000;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
}

.box1 {
  background-color: #1d1c1c;
  width: 158px;
  height: 160px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.box2 {
  background-color: #000000;
  width: 158px;
  height: 160px;
  margin: 0 auto;
  padding: 26px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.myp {
  padding-top: 28px;
  font-size: 18px;
  text-align: center;
  color: rgb(197, 0, 7)!important;
  font-family: 'Amperzand'!important;
}

.myp1 {
  padding-top: 28px;
  font-size: 18px;
  text-align: center;
  color: rgb(197, 0, 7)!important;
  font-family: 'Open Sans', sans-serif!important;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>

<div class="team1" id="team" style="background-color: #484848;">
  <div class="container">
    <div class="wrapper">
      <div class="col-lg-1">
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">

            <div class="front">
              <div class="box1">
                <p class="myp"> <i class='fas fa-arrow-right' style='font-size:24px; color:pink;'></i> Consulting </p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Consulting</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">

            <div class="front">
              <div class="box1">
                <p class="myp"> <i class='fas fa-arrow-right' style='font-size:24px; color:pink;'></i> Planning</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Planning</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">
            <div class="front">
              <div class="box1">
                <p class="myp"> <i class='fas fa-arrow-right' style='font-size:24px; color:pink;'></i> Architectural Designing</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Architectural Designing</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">

            <div class="front">
              <div class="box1">
                <p class="myp"> <i class='fas fa-arrow-right' style='font-size:24px; color:pink;'></i> Construction Management</p>
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Construction Management</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="col_third">
          <div class="hover panel1">

            <div class="front">
              <div class="box1">
              </div>
            </div>
            <div class="back">
              <div class="box2">
                <p class="myp1">Final Delivery</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1 agile_team_grid">
      </div>
    </div>
  </div>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->
    Login or Signup to reply.
  2. 0

    Have you heard of pseudo elements before?

    https://developer.mozilla.org/en-US/docs/Web/CSS/::after

    You can try to find a image of a arrow. Then you give the circle a class(for example .afterarrow) then on the ::after you place the arrow and position it right. SOmething like this:

    .afterarrow::after{
content: "";
background: url(images/arrow.png);
position: relative;
top: 10px;
left: 10px
}

    Something like this, will do, just play with the position and left/top and you will get it right.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search