Align different images surrounding a circle and revolve on orbit and display text in circle on hover with bootstrap 4

Question

I am trying to make a circle and there will be different images surrounding circle. And the images will keep revolving around the circle on an orbit like planets. On hover of those images, I want revolving to stop and I am trying to display some different text in the centre of circle. I have draw a perfect circle, but I am having trouble in aligning those images around the circle and also making it revolving around the circle for infinity. Below image is an example of it.

So basically the smaller circle with numbers are different images and on hover of these images some different texts will be displayed in the centre of big circle and the revolution to be stop. I am also trying to make it responsive so I have added it in a container and trying to put it in col-3.

I am having issue with aligning these images and also displaying the text in the centre of circle. This is what I have tried so far HTML

        <div class="col-3 mx-auto" style="background-color: grey;">
            <img src="images/location/2x/location.png" style="float: left; ">
            <div class="circle">
                <div class="text-center">

                </div>
            </div>
        </div>

CSS

.circle{
    width: 80%;
    height:0;
    padding-bottom: 80%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: #4679BD;
}

What would be the better way to achieve this ?
Any help ?

Please provide more code for proper analysis, logical part is missing — karthik, May 15 '18 at 14:48
@karthik That's what I am trying to ask. How would I achieve this ? — Lokesh Pandey, May 15 '18 at 14:54
Related - https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css — Paulie_D, May 15 '18 at 15:27
@FridayAmeh there are eight images surrounding a circle. Like I have added an example image — Lokesh Pandey, May 15 '18 at 16:46
@FridayAmeh How would I achieve responsiveness with the positioning of images ? — Lokesh Pandey, May 16 '18 at 03:02
Why not. You can simply use browser break Point to check if there is any overlap. If there is you can adjust your position defining media query on the break point width. Hope you understand.. — Friday Ameh, May 16 '18 at 12:52
Bootstrap will not help here, its more of CSS and/or JavaScript — kiranvj, May 28 '18 at 11:48

Gautam Naik · Accepted Answer · 2018-05-28T11:55:39.020

Here is my solution, Its not perfect, but It will give u a starting point.

The dyanamic text can be passed from the data-text attribute

<img data-text="A" src="http://placehold.it/50x50" alt="">

In order to get this text, I have added mouseover eventlistener to each images. And when we hover over the images, the text is fetched and updated from the data-text attribute using

 sampleText.innerHTML=this.getAttribute('data-text');

To stop the animation on hover, I pause the animation using

.image-holder:hover {
      animation-play-state: paused;
 }

var images = document.getElementsByTagName('img');
var sampleText = document.getElementById('sample-text');
for (var i = 0; i < images.length; i++) {
  images[i].addEventListener("mouseover", updateName)
}

function updateName() {
  sampleText.innerHTML = this.getAttribute('data-text');
}

body {
  padding: 100px;
}

.parent {
  position: relative;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: teal;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}

.image-holder {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*animation: rotate linear 5s infinite forwards;*/
  animation-name: rotate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.image-holder:hover {
  animation-play-state: paused;
}

.image-holder img {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.image-holder img:nth-child(1) {
  top: -15px;
  left: -15px;
}

.image-holder img:nth-child(3) {
  top: -15px;
  right: -15px;
}

.image-holder img:nth-child(5) {
  bottom: -15px;
  right: -15px;
}

.image-holder img:nth-child(7) {
  bottom: -15px;
  left: -15px;
}

.image-holder img:nth-child(2) {
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.image-holder img:nth-child(4) {
  top: 50%;
  right: -50px;
  transform: translateY(-50%);
}

.image-holder img:nth-child(6) {
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.image-holder img:nth-child(8) {
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="parent">
      <div class="circle" id="sample-text">
        Sample Text
      </div>
      <div class="image-holder">
        <img data-text="A" src="http://placehold.it/50x50" alt="">
        <img data-text="B" src="http://placehold.it/50x50" alt="">
        <img data-text="C" src="http://placehold.it/50x50" alt="">
        <img data-text="D" src="http://placehold.it/50x50" alt="">
        <img data-text="E" src="http://placehold.it/50x50" alt="">
        <img data-text="F" src="http://placehold.it/50x50" alt="">
        <img data-text="G" src="http://placehold.it/50x50" alt="">
        <img data-text="H" src="http://placehold.it/50x50" alt="">
      </div>
    </div>
  </div>
</div>

Thank you for your solution +1. Lemme try it – Lokesh Pandey May 28 '18 at 16:15 — Lokesh Pandey, May 28 '18 at 16:15
@Lokesh, if this answer helped u, then please accept it? – Gautam Naik May 31 '18 at 15:31 — Gautam Naik, May 31 '18 at 15:31

score 0 · Answer 2 · answered May 15 '18 at 15:45

Try using position elements to position you circle and text like so

        .circle{
        width: 300px;
        height:300px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background:white;
        position: relative;
        }
        span{
          color: red;
          position: absolute;
          left: 130px;
          top: 50%;
        }
        img{
          position: absolute;
          left: 270px;
          top: 45px;
        }

         <div class="col-3 mx-auto" style="background-color: grey;">
                <img src="images/location/2x/location.png" style="float: left">
                <div class="circle">
                    <span>Hello</span>
                </div>
            </div>

Align different images surrounding a circle and revolve on orbit and display text in circle on hover with bootstrap 4

2 Answers2