All geek questions in one place

CSS needs help, I need to stack circular divs under each other

I have a circular div with some css that causes it to expand on mousover. I have no idea how to start by having another large circle sit behind it with the same central point. This can create a ring around the first circle.

eg. with each green ring representing the outside of the next lap (3 laps total)

http://2.bp.blogspot.com/_HoDij8Z2tHY/TJzb854jDVI/AAAAAAAAAEv4/dMzvpjkq8XI/s1600/concentric_circles1.jpg

image example

I don’t think I explained it very well!: / Sorry! I need separate divs, not the one that creates the outer ring!

Here is my current code:

#circles { margin-right:auto; margin-left:auto; width:800px; height:800px; alignment-adjust:central; } .circle1 {position:relative; margin-top:50%; margin-right:auto; margin-left:auto; width:100px; height:100px; border-radius:50%; background: #ff3019; /* Old browsers */ background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */ background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */ transition:1s; -moz-transition: 1s; /* Firefox 4 */ -webkit-transition: 1s; /* Safari and Chrome */ -o-transition: 1s; /* Opera */ -ms-transition: 1s; /* IE9 (maybe) */ }
+4
source share
2 answers

Do you mean that you want them to grow in pairs, like circles in water? http://jsfiddle.net/GCyrillus/jGtAv/1

a nested div with padding should do this or span.

 div { min-height:1em; min-width:1em; margin:0; box-shadow:inset 0 0 0 1px; border-radius:100%; transition:1s; display:inline-block; vertical-align:top; text-align:center;line-height:0.8em;text-shadow:0 0 5px } div:hover, div:hover div { padding:3em; transition:1s; } 
  <div id="ring" title="rings in water""> <div> <div> <div> <div> <div> <div> <div id="stone"> o </div> </div> </div> </div> </div> </div> </div> </div>
+2
source

Something like that?

@GCyrillus is nested, I have separate divs ...

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>circles</title> <style> html,body{margin:0;padding:0;} body>div>div{ position:fixed; border-radius:100%; border:1px solid rgba(0, 0, 0, 0.5); width:250px; height:250px; -webkit-transition:all 1200ms ease; } body>div>div:nth-child(1){-webkit-transform:scale(0.3);} body>div>div:nth-child(2){-webkit-transform:scale(0.3);} body>div>div:nth-child(3){-webkit-transform:scale(0.3);} body>div:hover>div:nth-child(1){-webkit-transform:scale(1);} body>div:hover>div:nth-child(2){-webkit-transform:scale(0.8);} body>div:hover>div:nth-child(3){-webkit-transform:scale(0.6);} </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>
+1
source

Source: https://habr.com/ru/post/1484866/

More articles:


All Articles