Position images into Circle with HTML and CSS

Question

I need each element of the attached picture to be interactive, i.e. to be able to have their own CSS class assigned to them.

I have sliced the image into 3 sections, as seen below. The height and width of the circle in the original picture is 476px x 476px.

I 'm wondering how I might arrange these slices to replicate the image attached.

Is this even possible?

Here's the HTML for each slice for anyone that might be interested in trying to help.

<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">

This is not a duplicate question as the "duplicated" question is based on creating the elements using svg. This question is based on using image elements and organizing them into a circular pattern.

As per my understanding, you want to arrange these three images like shown, right ? — Gokul Shinde, May 06 '16 at 14:29
This question is incorrectly marked as a duplicate. The "duplicated" question is based on creating the elements using svg. This question is based on using image elements and organizing them into a circular pattern. — Frits, May 06 '16 at 14:44
Thanks Frits. I seen the "duplicate" question before and it helped me in no way whatsoever. I needed a simpler solution. — Gavin Friel, May 06 '16 at 14:55
You can create the circular sectors using CSS: https://jsfiddle.net/j2nkuhtr/2/ — Aloso, May 06 '16 at 17:10

score 1 · Accepted Answer · answered May 06 '16 at 14:31

Not without using some crazy specific positioning...

https://jsfiddle.net/968zsj53/

<div class="container">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>

.container {
  width:500px;
}

.container img {
  max-width:100%;
  position:absolute;
}

.container img:nth-child(1){
  left:0;
  top:0;
}

.container img:nth-child(2){
  left:244px;
  top:0;
}

.container img:nth-child(3){
  left:38px;
  top:301px;
}

G-Cyrillus · Answer 2 · 2016-05-06T14:43:27.717

question is missing info, but a simple way would be display + margin:

Not sure it meets your requirements

img:last-of-type {
  display: table;/* or block, table is for the tease */
  margin: -64px 33px 0
}

<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">

For a menu, you could keep the idea and use the wrapper to mask areas

a:last-child img {
  margin: -64px 33px 0
}
nav {
  border: solid;
  height: 470px;
  width: 470px;
  border-radius: 50%;
  position: relative;
}
nav:before {
  content: '';
  position: absolute;
  height: 217px;
  width: 216px;
  background: gray;
  border-radius: 50%;
  top: 127px;
  left: 127px;
}

<nav>
  <a href="a">
    <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
  </a>
  <a href="b">
    <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
  </a>
  <a href="c">
    <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
  </a>
</nav>

score 1 · Answer 3 · answered May 06 '16 at 14:34

Try this simple thing, it might help you

div {
  position: relative;
}
#three {
  left: 32px;
  position: absolute;
  top: 296px;
}

<div>
 <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
 <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
 <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png" id="three">
</div>

score 0 · Answer 4 · answered May 06 '16 at 14:29

0

Just take a look right here: http://tympanus.net/Tutorials/CircularNavigation/index2.html

Here is the tutorial: http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

This uses CSS3 transforms. Have fun.

answered May 06 '16 at 14:29

SimonSolutions

97
1
4

score 0 · Answer 5 · answered May 06 '16 at 14:31

.circle {
  position: absolute;
  width: 120px;
  height: 120px;
  display: block;
}
.circle img:nth-child(1) {
  position: absolute;
  width: 100%;
  left: 0;
}
.circle img:nth-child(2) {
  position: absolute;
  width: 100%;
  left: 125px;
}
.circle img:nth-child(3) {
  position: absolute;
  width: 204px;
  left: 21px;
  height: auto;
  top: 154px;
}

<div class="circle">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>

score 0 · Answer 6 · answered May 06 '16 at 14:38

You will have to mess around with positioning. I have set this up for you in jsfiddle.

Here have a look: https://jsfiddle.net/x3rbqsbm/

The things you want to look for here is the holding container, and then the subsequent position on the elements withing.

.circle {
  height: 475px;
  position: relative;
  width: 475px;
}

.circle > img {
  position: absolute;
  -webkit-transition: transform 0.15s linear 0s;
  -ms-transition: transform 0.15s linear 0s;
  transition: transform 0.15s linear 0s;
}

.circle > img:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.circle > img:nth-child(1) {
  left: 0;
  top: 0;
}

.circle > img:nth-child(2) {
  right: 0;
  top: 0;
}

.circle > img:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.circle > img:nth-child(3):hover {
  -webkit-transform: scale(1.1) translateX(-50%);
  -ms-transform: scale(1.1) translateX(-50%);
  transform: scale(1.1) translateX(-50%);
}

<div class="circle">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
  <img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>

score 0 · Answer 7 · answered May 25 '16 at 06:37

 
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">

<h2>Image in a Circle</h2>
<p>You do not need boostrap, you can use w3-schools libraries instead</p>

<img src="https://i.stack.imgur.com/schtq.png" class="w3-circle" alt="" style="width:50%">

</body>
</html>

Position images into Circle with HTML and CSS

7 Answers7