TL; DR; http://jsfiddle.net/k7yxtpc7/
Modify with (very long?) Explanation:
So, we start with the boot hierarchy:
<div class="container-fluid"> <div class="row"> <div class="circle_container col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12"> </div> </div> </div>
An image planet will be placed inside .circle_container . Our goal is to make sure that the entire circle will respond to changes in the width of .circle_container and adapt correctly. Thus, any change in Boostrap to the container will be reflected on the circle itself, which makes it compatible with Bootstrap.
First we need to prepare a little .circle_container . Since this is a whole circle, the container should be square. We must find a way to make the height of .circle_container always equal to its width. I do this by putting the img square inside the .circle_container , then scale the img size to fit the width of the container:
<div class="circle_container ..."> <img class="transparent_square" src="http://i.stack.imgur.com/5Y4F4.jpg" width="2" height="2" /> </div> .transparent_square{ width: 100%; height: auto; }
Note. I could not find the transparent square image on the Internet, so I had to deal with the white square. It is best to use a 2px x 2px transparent image in your product.
Ok, now we have a square container. But we also limited ourselves. From now on, img should be the only child .circle_container that has a static (default) or relative position, because any extra child expands the container, destroying the square shape. However, it doesn’t matter, because in any case, we will post other absolute children.
Next is the central text bubble:
<div class="central_text text-center"> <h3>Special for you</h3> <h5>Lorem ipsum</h5> </div> .central_text{ left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; }
The translation trick uses the fact that the percentile value in the css transform uses the element size and height of the element’s preliminary rendering, while in all other positioning rule its parent width and height are used instead. Providing the left: 50%; top: 50% element left: 50%; top: 50% left: 50%; top: 50% , we place its upper left corner in the center of its parent, then translate it up and to the left 50% of its own width and height, effectively centering the element inside its parent. This is just one of several methods for centering an element inside a container, but it is best suited to our situation because the element is absolutely .
Finally, we will reach the part where we create the circle. Summing up the trick here: we put the actual image inside the container with a pivot point in the center of the container and position the image on 1 side of the container equal to the radius of the circle. Thus, when we rotate the image container, the image will move in a circle around the center of the container, like a drawing compass. After the image has reached the desired position, we rotate the image to the same extent in a different direction to compensate for the orientation of the tilt, making the image vertically again.
Container and image:
<div class="moon_container moon1"><img class="moon moon1" src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png"></div> .moon_container{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20%; }
I set the width for .moon_container to 20% of the width of .circle_container . This will be the width of the images in our final circle. Increasing or decreasing this number simply resizes the image as you wish.
Now, to offset the image from its container:
.moon{ width: 100%; height: auto; position: relative; left: 175%; }
Note that CSS left uses the direct parent width of the element as the base unit. If you changed the width of the .moon_container in the previous part, the actual distance between the images will also change.
Finally, rotations (I use moon2 as an example here because moon1 does not need to rotate):
.moon_container.moon2{ transform: translate(-50%, -50%) rotate(45deg); } .moon.moon2{ transform: rotate(-45deg); }
Why transform: translate(-50%, -50%) rotate(45deg); , not transform: rotate(45deg); ? Because we declared transform: translate(-50%, -50%); earlier for .moon_container (centering trick). If we write only transform: rotate(45deg); , then the CSS parser will override the previous rule with the new one, losing the translate part. Therefore, we must add manually.
Repeat the process for all 8 images and we are done!
If you have an undetermined number of images, just use javascript to calculate this part of the rotation for each image.
I hope my explanations were useful to you. I always explained poorly ...
Edit 2: http://jsfiddle.net/k7yxtpc7/3/ Change text in hover mode as requested by OP. There is only one thing in this part, i.e.
$('body').on({ mouseenter : function(event){ ... }, mouseleave : function(event){ ... } }, ".moon");
It’s a good habit to associate all events on the “body” or document, instead of associating them with the actual elements themselves ( .moon ). So you:
- Always use only 1 event listener for the hover event, instead of 8 (you can imagine how the number increases on the actual product).
- When you add more images later, you do not need to associate the event with the new
.moon .
Original answer:
Since this requirement is rather vague, I could not know if my decision would satisfy. My decision is based on 3 assumptions:
- The entire planet of images is based only on the width of the viewport, just as Bootstrap handles its responsive design. If you want to consider the port port height, maybe I can call another version.
- Images are scaled based on the width of the Bootstrap container to make sure there is enough space to display all the images.
- Typography uses Bootstrap default values.
The solution avoids the use of javascript due to the fact that you cannot add / remove images on the fly. If the dynamic number of images is your intention, I will do the calculations.
Compatible with sexual animations.
Unfortunately, Bootstrap center-block only centralized the block horizontally, I had to use the translation trick to center the pivot point.
.central_text{ left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; }
This is just the place to answer. I will write a detailed explanation when we will have a satisfactory solution.