Arrange various images in a circular formation, rotate them in orbit, and show text within the circle upon hover using Bootstrap 4

Question

Arrange various images in a circular formation, rotate them in orbit, and show text within the circle upon hover using Bootstrap 4

I'm attempting to create a circle with various images circling around it, resembling planets in orbit. When hovering over these images, I want the rotation to pause and display different text in the center of the circle. While I've successfully drawn a perfect circle, I'm struggling with aligning the images around it and maintaining their continuous revolution. The image below illustrates my goal. https://i.sstatic.net/CopgG.png

Essentially, each smaller circle containing numbers represents an image. Upon hovering over these circles, unique text will appear at the center of the larger circle, halting the rotation. Additionally, I aim to make this project responsive by placing it within a container and accommodating it in col-3.

I'm currently facing challenges when it comes to aligning the images and presenting the text at the center of the circle. Here is what I have attempted thus 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 most effective approach to accomplish this?
Any guidance?

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

My solution may not be flawless, but it can serve as a starting point.

If you want to display dynamic text, make use of the data-text attribute.

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

To retrieve and update the text when hovering over images, an event listener for the mouseover event has been added to each image:

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

To halt the animation on hover, I have utilized the following CSS rule:

.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');
}

/* CSS styles go here */

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

Answer 2

My solution may not be flawless, but it can serve as a starting point.

If you want to display dynamic text, make use of the data-text attribute.

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

To retrieve and update the text when hovering over images, an event listener for the mouseover event has been added to each image:

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

To halt the animation on hover, I have utilized the following CSS rule:

.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');
}

/* CSS styles go here */

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

Answer 3

Answer №2

Consider utilizing positioning properties to adjust the placement of your circle and text, as demonstrated below:

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

Answer 4

Consider utilizing positioning properties to adjust the placement of your circle and text, as demonstrated below:

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

Arrange various images in a circular formation, rotate them in orbit, and show text within the circle upon hover using Bootstrap 4

Answer №1

Answer №2

Similar questions

Applying a CSS border to a div that perfectly encloses a span, adjusting to the

jQuery issue with hover and mousedown

Achieve the same height for an HTML table as its parent div by adjusting the table's height when the div's height is not explicitly defined

Struggling with Implementing Modals in Bootstrap 3.3.7

The issue of the fixed navbar overlapping the scrollbar of the page occurs when utilizing the overflow-y scroll feature

Center the navigation links within the navigation block

JavaScript/jQuery creation of a dynamic breadcrumb trail linked to the current page

Issue with Number Form Input in Firefox on BootstrapVue

Adaptable background images with CSS styling

Submitting the form does not result in the textbox being cleared

What is the method for inserting line breaks in Ionic2 toasts using HTML?

What is the process for incorporating a Bootstrap 4 template into my Ember web project?

Retrieve information from Wikipedia corresponding to the keyword entered in the form

Changing the variable value upon clicking

Validating the Color Coding of Backgrounds in a Table using Selenium WebDriver and Java

Can the ::before selector be used in HTML emails?

Complete the submission of a form containing a dropdown field

What steps can be taken to enable users to send and receive messages on my chat website?

Navigate to the page using PHP or JQuery

Return to a natural position as the element becomes fixed