Arranging items in a semi-circular formation around the color Blue in a precise manner

I have a character named Blue (who is blue) and I would like to place some elements in a half-circle around him.

Each element will consist of an image and a text span positioned below the image.

My current attempt results in the elements rotating incorrectly with the spans not being positioned accurately. How can I achieve this?

.blueAnime {
  width: 30vw;
  height: auto;
}

.blueContainer{
  display: flex;
  justify-content: center;
  width:100%;
  padding-top:600px;
}



.coins {
  width: 5vw;
  height: auto;
}

.circle {
    width: 300px;
    height: 30px;
    display: block;
    position: absolute;
    top: 110%;
    left: 50%;
    margin: -15px;
}

.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body> 

<div class="blueContainer">
    <img class="blueAnime" src="https://langfox.ir/pictures/blue.png">

    <div class="circle one">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle two">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle three">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle four">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle five">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle six">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle seven">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle eight">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle nine">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

    <div class="circle ten">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This text goes beneath each image</span>
    </div>

</div>

</body>

</html>

Keep scrolling to view Blue.

javascripthtmljquerycss

Answer №1

Let's start by ensuring the correct setup of the img and span elements within a single .circle element:

.circle {
  display: inline-block;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}
<div class="circle four">
  <img class="coins" src="https://langfox.ir/pictures/coins.png">
  <span>text below</span>
</div>

With a single .circle element in place, we can proceed to define multiple instances and rotate them as needed:

.blueAnime { width: 30vw; height: auto; }
.blueContainer{
  display: flex;
  justify-content: center;
  width:100%;
  padding-top:300px;
}
.circle {
  display: inline-block;
  position: absolute;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
...
.ten { transform: rotate(-180deg) translate(40vw); }
<div class="blueContainer">
    <img class="blueAnime" src="https://langfox.ir/pictures/blue.png">

    <div class="circle one"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    ...
</div>

To keep the .circle elements level visually, we need to undo the rotation after translating them. This 'unrotation' is achieved by incorporating a second rotation operation:

.blueAnime { width: 30vw; height: auto; }
.blueContainer{
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 300px;
}
.circle {
  display: inline-block;
  position: absolute;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.circle > img {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
}
.one { transform: rotate(-0deg) translate(40vw) rotate(0deg); }
.two { transform: rotate(-20deg) translate(40vw) rotate(20deg); }
.three { transform: rotate(-40deg) translate(40vw) rotate(40deg); }
...
.ten { transform: rotate(-180deg) translate(40vw) rotate(180deg); }
<div class="blueContainer">
    <img class="blueAnime" src="https://langfox.ir/pictures/blue.png">

    <div class="circle one"><img class="coins" src="https://langfox.ir/pictures/coins.png"><span>Text below</span></div>
    ...
</div>

Answer №2

.blueAnime {
  width: 30vw;
  height: auto;
}

.blueContainer{
  display: flex;
  justify-content: center;
  width:100%;
  padding-top:600px;
  position:relative;
}



.coins {
  width: 5vw;
  height: auto;
}

.circle {
    width: 300px;
    height: 30px;
    display: block;
    position: absolute;
    top: 80%;
    left: 30%;
    margin: -15px;
}

.one { transform: rotate(-0deg) translate(40vw); }
.two { transform: rotate(-20deg) translate(40vw); }
.three { transform: rotate(-40deg) translate(40vw); }
.four { transform: rotate(-60deg) translate(40vw); }
.five { transform: rotate(-80deg) translate(40vw); }
.six { transform: rotate(-100deg) translate(40vw); }
.seven { transform: rotate(-120deg) translate(40vw); }
.eight { transform: rotate(-140deg) translate(40vw); }
.nine { transform: rotate(-160deg) translate(40vw); }
.ten { transform: rotate(-180deg) translate(40vw); }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body> 

<div class="blueContainer">
    <img class="blueAnime" src="https://langfox.ir/pictures/blue.png">

    <div class="circle one">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle two">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle three">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle four">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle five">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle six">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle seven">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle eight">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle nine">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

    <div class="circle ten">
        <img class="coins" src="https://langfox.ir/pictures/coins.png">
        <span>This is going to be below each image</span>
    </div>

</div>

</body>

</html>

Add position:relative; to blueContainer class

.circle {    
    top: 80%;
    left: 30%;
}

please modify the top and left values as needed

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS: The height of floating divs is set to 0

I'm attempting to align 2 divs next to each other within another div, creating 2 columns of text with the outer div forming a border around both: HTML <div id="outer"> <div id="left"> ... <div id="right"> </div& ...

htmlcss

An image that is in motion at an inappropriate time

My website has run into an issue. Within the navigation bar, there are two unordered lists containing list items and nested ul tags with images in some of the list items. When applying animations, the image moves along with the tabs. Here are visual exampl ...

htmlcss

Animate with Jquery sliding technique

Allow me to explain a situation that may seem unclear at first glance. I have implemented a jQuery script that animates a sliding box upon hover. $(function() { $('.toggler').hover(function() { $(this).find('div').slideTog ...

javascriptjqueryhtmlcss

After my jQuery functions are executed, my CSS rules are loaded

Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this: div#container > div#contentLeft { //Code here } However, when I add jQuery to spice up my site, the CSS rules seem to ...

javascriptjquerycss

Autocomplete in Vue.js with cascading suggestions based on object keys

I have been experimenting with creating a 3 or 4 level cascading autocomplete feature in Vue.js, but I'm facing some issues with its functionality. You can view the original code on this CodePen link. <div id="app"> <v-app id=&qu ...

javascriptvue.jsselectautocomplete

Combining td elements within a table

Currently, I am working on creating a weekly calendar using a combination of JavaScript and PHP to interact with an SQL table. The process involves generating an empty table structure in JavaScript and then populating specific cells with data retrieved fro ...

javascriptphphtmlhtml-table

Using Vue 3, Bootstrap, and Pinia to create an innovative Global Modal experience

After creating a ModalComponent.vue file that I intend to use across different sections, I encountered an issue with closing the modal after calling my Pinia stores. The modal includes slots for the title, body, and footer, along with a standard close butt ...

javascriptvue.jsbootstrap-modalbootstrap-5pinia

Issues with jQuery custom accordion functionality in Internet Explorer, Safari, and Chrome browsers

When a corresponding <a> is clicked, my script should expand/collapse UL elements. It works perfectly in Firefox and you can check it out here. First, I load the jQuery library and then my own examples.js file which includes: function initExamples( ...

javascriptjqueryjquery-selectorsjquery-events

Switch input-lg to input-sm in Bootstrap3 for smaller screens

One of my challenges is incorporating Twitter Bootstrap’s input-lg class on all input fields. I am wondering if there is a way, possibly utilizing JavaScript, to seamlessly switch to Twitter Bootstrap's input-sm class on smaller screens. This would ...

twitter-bootstrapcssmedia-queries

Having trouble with transferring json data to a controller using ajax

There seems to be an issue with sending JSON data to a controller using AJAX. Although the data appears to have been sent correctly, an error message is received: org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver - Resolved [org ...

javajqueryjsonajaxspring

The usage of alert() is not allowed within a jQuery function

Currently, I am experimenting with jQuery for making AJAX calls. For now, I am trying to display the response text in a popup box using the alert() method. $(document).ready(function() { $(".jeobutton").mouseup(function() { var $button = $(thi ...

javascriptjqueryajaxalert

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I make the Struts2 iterator function correctly?

Using the Struts2 <iterator> tag in a JSP to display values, the method is being called but no results are appearing on the page. All the necessary data is printing in the console, but not in the JSP itself. The call made is localhost\listAddCo ...

javahtmljspstruts2

HTML5 coding can be enhanced by applying unique CSS rules for alignment purposes

html { font-family: "Open Sans", sans-serif; font-weight: 100; background-color: #fbfbfb; } body { font-family: "Open Sans", sans-serif; font-weight: 100; } body h1 { font-weight: 100; } body h3 { font-family: "Open Sans", sans-serif; fo ...

javascriptcsshtmlalignment

Eliminate adjacent items in an array to avoid duplicates and keep track of the remaining count

I'm currently working on developing a console interface similar to those found in web browsers. However, I've hit a roadblock when it comes to handling duplicate messages. For example, if you input [...Array(10)].map(x => console.log("hello")) ...

javascriptarrays

During the development of my project using the MERN Stack, I faced a challenge that needed to be

I recently ran into an issue while working on my MERN Stack project. The React app is running on port 3000 and the Express API on port 5000. The problem arose when I tried to add OAuth functionality using Redux, as I started getting an error message that ...

javascriptreactjsexpressoauthcors

Changing model to array in mvc 3

I have a model that I would like to convert into an array by clicking on a button to execute a JavaScript function. The function will then send the array to a controller that will either read and parse the data as JSON or simply as a Model. For example: ...

javascriptjqueryasp.net-mvcasp.net-mvc-3razor

Guide on creating and synchronizing an XML/JSON file that stores beat information (BPM) for audio using JavaScript

Looking to sync Javascript events with the BPM of music for a game similar to "Guitar Hero." We start with: In order to create a track file based on beat detection (with each BPM saved like sheet music), how can it be generated beforehand rather than in ...

javascriptaudiosynchronizationhtml5-audiobeat-detection

The issue of duplicate backgrounds appearing on the burger menu when adjusting the height

There seems to be an issue with my burgermenu; when I attempt to adjust the height, the background-color ends up duplicating. .bm-menu { background-color: rgba(255, 255, 255, 0.9); height: 60vh; position: fixed; transition: top 0.3s; to ...

cssreactjsduplicates

Is there a way to utilize the Jquery output as a variable in a PHP query?

Here is the code snippet that displays the item clicked using Jquery: <html> <head> <?php include('config/js.php');?> </head> <body> <div id="target"> ...

phpjqueryajax