As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reaches that angle. Can someone provide a solution using HTML, CSS, and JavaScript?

HTML code

<div id="parent-circle">
    <div class="circle blue">vinay</div>
    <div class="circle pink">vinay</div>
    <div class="circle lime">vinay</div>
    <div class="circle orange">vinay</div>
</div>
<div class="mt-5 content pt-2">
    <h1>Health Record</h1>
    <p class="w-75">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, doloremque!</p>
</div>

body {
width: 90vw;
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

body #parent-circle {
position: relative;
width: 20vw;
height: 20vw;
border: 0.4vw solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 0.7s linear;
animation: rotate 14s infinite linear;
}
body #parent-circle .circle {
display: block;
position: absolute;
width: 30%;
height: 30%;
margin: -14%;
border-radius: 50%;
top: 50%;
left: 50%;
}
body #parent-circle .circle.blue {
background-color: #416ba9;
transform: translate(10vw);
-webkit-animation: 25s linear infinite reverse spin_1;
-moz-animation: 25s linear infinite reverse spin_1;
-ms-animation: 25s linear infinite reverse spin_1;
animation: 25s linear infinite reverse spin_1;
}
body #parent-circle .circle.pink {
background-color: #e6427a;
transform: rotate(90deg) translate(10vw) rotate(-90deg);
-webkit-animation: 25s linear infinite reverse spin_1;
-moz-animation: 25s linear infinite reverse spin_1;
-ms-animation: 25s linear infinite reverse spin_1;
animation: 25s linear infinite reverse spin_1;
}
body #parent-circle .circle.lime {
background-color: #cddb00;
transform: rotate(180deg) translate(10vw) rotate(-180deg);
-webkit-animation: 25s linear infinite reverse spin_1;
-moz-animation: 25s linear infinite reverse spin_1;
-ms-animation: 25s linear infinite reverse spin_1;
animation: 25s linear infinite reverse spin_1;
}
body #parent-circle .circle.orange {
background-color: #e0592a;
transform: rotate(270deg) translate(10vw) rotate(-270deg);
-webkit-animation: 25s linear infinite reverse spin_1;
-moz-animation: 25s linear infinite reverse spin_1;
-ms-animation: 25s linear infinite reverse spin_1;
animation: 25s linear infinite reverse spin_1;
}
.content {
margin-left: 20%;
}

@keyframes example {
0% {
width: 30%;
height: 30%;
}


100% {
width: 60%;
height: 60%;
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
12.5% {
-webkit-transform: rotate(90deg)
}
25% {
-webkit-transform: rotate(90deg);
}
37.5% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
62.5% {
-webkit-transform: rotate(270deg);
}
75% {
-webkit-transform: rotate(270deg);
}
87.5% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

CSS CODE

I have achieved rotating up to 90 degrees but need assistance in enlarging the image and displaying the appropriate content..

This is my desired outcome

javascripthtmlcssbootstrap-5

Answer №1

Here is a simplified method to achieve your goal of scaling the circles at 90-degree angles while maintaining their orientation.

New Update!

You have the flexibility to adjust the scale from 1.5 to your desired value; just ensure that you update all instances accordingly.

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#parent-circle {
  position: relative;
  width: 20vw;
  height: 20vw;
  margin: 0;
  border: 0.4vw solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  animation: rotate 7s infinite linear;
  animation-delay: 0;


}

.circle {
  display: block;
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;

}

.circle-content {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  animation-delay: 0;
  background: gray;
}


#blue-circle {
  background: blue;
  animation: circleRotateBlue 7s infinite linear;

}

#pink-circle {
  background: pink;
  animation: circleRotatePink 7s infinite linear;

}

#lime-circle {
  background: lime;
  animation: circleRotateLime 7s infinite linear;

}

#orange-circle {
  background: orange;
  animation: circleRotateOrange 7s infinite linear;

}

.blue {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pink {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);

}

.lime {
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);

}

.orange {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);

}




.content {
  margin-left: 20%;
}



@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  12.5%,
  25% {
    -webkit-transform: rotate(90deg)
  }

  37.5%,
  50% {
    -webkit-transform: rotate(180deg);
  }

  62.5%,
  75% {
    -webkit-transform: rotate(270deg);
  }

  87.5%,
  100% {
    -webkit-transform: rotate(360deg);
  }
}


@keyframes circleRotateBlue {
  0% {
    -webkit-transform: rotate(0deg) scale(1.5);
  }

  12.5%,
  25% {
    -webkit-transform: rotate(-90deg);
  }

  37.5%,
  50% {
    -webkit-transform: rotate(-180deg);
  }

  62.5%,
  75% {
    -webkit-transform: rotate(-270deg);
  }

  87.5%,
  100% {
    -webkit-transform: rotate(-360deg) scale(1.5);
  }
}


@keyframes circleRotateLime {
  0% {
    -webkit-transform: rotate(0deg);
  }

  12.5%,
  25% {
    -webkit-transform: rotate(-90deg) scale(1.5);
  }

  37.5%,
  50% {
    -webkit-transform: rotate(-180deg);
  }

  62.5%,
  75% {
    -webkit-transform: rotate(-270deg);
  }

  87.5%,
  100% {
    -webkit-transform: rotate(-360deg);
  }

}



@keyframes circleRotatePink {
  0% {
    -webkit-transform: rotate(0deg);
  }

  12.5%,
  25% {
    -webkit-transform: rotate(-90deg);
  }

  37.5%,
  50% {
    -webkit-transform: rotate(-180deg);
  }

  62.5%,
  75% {
    -webkit-transform: rotate(-270deg) scale(1.5);
  }

  87.5%,
  100% {
    -webkit-transform: rotate(-360deg);
  }

}


@keyframes circleRotateOrange {
  0% {
    -webkit-transform: rotate(0deg);
  }

  12.5%,
  25% {
    -webkit-transform: rotate(-90deg);
  }

  37.5%,
  50% {
    -webkit-transform: rotate(-180deg) scale(1.5);
  }

  62.5%,
  75% {
    -webkit-transform: rotate(-270deg);
  }

  87.5%,
  100% {
    -webkit-transform: rotate(-360deg);
  }

}
<div id="parent-circle">
  <div class="circle blue">
    <div id="blue-circle" class="circle-content">vinay</div>
  </div>
  <div class="circle pink">
    <div id="pink-circle" class="circle-content">vinay</div>
  </div>
  <div class="circle lime">
    <div id="lime-circle" class="circle-content">vinay</div>
  </div>
  <div class="circle orange">
    <div id="orange-circle" class="circle-content">vinay</div>
  </div>
</div>

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

Exploring the Node.js Connector: Utilizing Collection.remove

I can't wrap my head around the meaning of this: w, {Number/String, > -1 || ‘majority’ || tag name} the write concern for the operation where < 1 is no acknowlegement of write and w >= 1, w = ‘majority’ or tag acknowledges the ...

javascriptnode.jsmongodb

Use PHP code to echo a clear division after every third result in MySQL

I am currently displaying results in descending order from a MySQL table using a while loop. I have already set up a pagination system that displays 9 records per page. However, I am facing an issue when trying to implement a CSS break every 3 records in ...

phpmysqlcss

The functionality of onClick and console.log seems to be malfunctioning on Nextjs

I'm currently learning NEXT but I've encountered some issues with certain functions "use client" import { useState } from 'react' export default function idk() { const [counter,setCounter]=useState(0) const add=()=> ...

javascriptnode.jsreactjsxmlnext.js

Alert: An invalid value of `false` was received for the non-boolean attribute `className`. To properly write this to the DOM, please provide a string instead: className="false" or use a different

While many have tried to address this issue before, none of their solutions seem to work for me... The error I am encountering is: If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}. If ...

javascriptreactjsnext.js

What are some methods for identifying a single attribute element that is duplicated elsewhere on a webpage?

<html> <tr id="userman-orgchart-tree-node-9" class="fancytree-expanded fancytree-folder fancytree-has-children fancytree-exp-e fancytree-ico-ef"> <td> <span class="fancytree-node" style="padding-left: 16px;"> <span class="fancytr ...

htmlcssxpathselenium-webdriverselenium-ide

How to incorporate JSON into a d3.js calendar display?

Learning d3 charts and javascript has been quite challenging for me. After researching a lot, I successfully populated the chart with CSV data. Now, my next goal is to populate the chart with json data. This is the code I'm using, which is inspired ...

javascriptjqueryhtmljsond3.js

What is the secret to keeping a hover effect active?

As I hover over the buttons in my stack, a text box appears on the right side. The intention is for this text box to act as a scroll box, but it disappears when I move my mouse to scroll because it needs to be continuously hovered upon to stay active. To ...

htmlcsshover

Adjust alterations in a Vue Component to apply to separate routes

I have a Filter tab component that I use in various routes. When I click on a tab, it becomes active. After clicking on one tab, I want it to remain active in other routes as well. How can I achieve this? Any suggestions or articles would be greatly apprec ...

javascriptvue.jsvuejs2vue-componentvue-router

Designing a nested function within a function encapsulated within a class

Suppose I have a class with a function inside: var myClass = class MyClass() { constructor() {} myFunction(myObj) { function innerFunction() { return JSON.stringify(myObj, null, 2); } return myObj; } } In this scenario, callin ...

javascriptnode.jses6-class

What advantages do CSS pre-processors (SASS, SCSS, LESS) bring to the table for creating Responsive Web Designs?

Currently, I am embarking on a Responsive Web Design (RWD) project and contemplating whether integrating LESS would streamline the process. Are there practical benefits to utilizing CSS preprocessors for RWD projects? I suspect that employing media qu ...

cssresponsive-designless

Executing multiple HTTP requests simultaneously in groups using an asynchronous for loop for each individual request

I'm currently working on running multiple requests simultaneously in batches to an API using an array of keywords. Read Denis Fatkhudinov's article for more insights. The issue I'm facing involves rerunning the request for each keyword with ...

javascriptnode.jsasync-awaites6-promise

Transforming HTML content in real-time using Express.js

I'm a little uncertain if I understand the concept of Express MVC correctly: If my goal is to create a single page application and dynamically modify the HTML, can Express assist me with this? Or will I only be able to work with static pages that req ...

htmlmodel-view-controllerexpress

I'm having trouble retrieving my variable within the socketcluster's socket.on function

How can I store the value of msg in the variable sample when sample is not accessible inside the callback function? import { Injectable } from '@angular/core'; import * as socketCluster from 'socketcluster-client'; @Injectable({ pro ...

javascriptangulartypescriptsocketcluster

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

javascriptjqueryhtml

What could be causing the issue with updating a js file using ajax?

I've been dealing with a php file called users. Initially, everything was going smoothly as I wrote some JavaScript code for it. However, after making updates to the JavaScript code, it seems to have stopped functioning. Below is the content of the p ...

javascriptphpajaxxmlhttprequestrendering

Can you explain the significance of polyfills in HTML5?

What exactly are polyfills in the context of HTML5? I've come across this term on multiple websites discussing HTML5, such as HTML5-Cross-Browser-Polyfills. Essentially, polyfills refer to tools like shims and fallbacks that help add HTML5 features ...

javascripthtmlfallbackpolyfillsshim

JavaScript failing to accurately measure the length

Currently experiencing a Javascript issue where the length of an element is not displayed correctly when using .length, even though it shows up in Chrome console. Here is what it looks like in Chrome console <html xmlns="http://www.w3.o ...

javascripthtmlcssconsole.logvariable-length

How to add additional text after a particular line within a string containing multiple lines using JavaScript

What is the best way to add a new string after line 2 in a multi-line JavaScript string? ...

javascriptstring

The Material UI Icon is missing from the location '@mui/icons-material/Send.js'

I am currently utilizing the Material UI library and attempting to import SendIcon through this import statement: import { SendIcon } from "@mui/icons-material/Send.js"; Due to including "type" : "module" in my package.json f ...

javascriptreactjsmaterial-ui

What is the method for altering the color of the webkit-slider-thumb using JavaScript?

I am looking to adjust the color of an input range using JavaScript instead of CSS. Can someone help me with this request? Current CSS Code: input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: goldenrod !importa ...

javascripthtmlcss