Gavin Friel Gavin Friel - 6 months ago 36
Javascript Question

Position images into Circle with HTML and CSS

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. enter image description here

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.

Answer

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;
}
Comments