使用CSS在所有方向上增长div？ [英] Make a div grow in all directions with CSS?

问题描述

我有一个HTML / CSS页面，其中我有4个div在主体形状像圆。我已经使它这样的divs的大小增长悬停。这工作正常，除了一些情况下，它去到下一行，当浏览器窗口是各种大小（仍然试图工作，出来）。然而，我想要做的事情是，当div在悬停时增长，它在所有方向上增长，而不是像正在做的那样增长到正确和向下。有谁知道这个的修复？

I have an HTML/CSS page, in which I have 4 divs in the main body shaped like circles. I've made it so these divs' size grow on hover. This works fine except for some cases where it goes to the next line and when the browser window is various sizes (still trying to work that out). However, the thing I am trying to do is make it so when the div grows on hover, it grows in all directions rather than growing to the right and down as it is currently doing. Does anyone know the fix for this?

以下是指向网站的链接： http：// www.somil.site90.net

Here is a link to a sitepage: http://www.somil.site90.net

这里是其中一个圈子的代码。其他3是相同的，除了边距，但让我知道，如果你想要我粘贴那些以及。提前感谢！

Here is the code for one of the circles. The other 3 are identical except for the margins, but let me know if you want me to paste those as well. Thanks in advance!

#circ1 {
  background: #c4c4c4;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: relative;
  margin: 100px 0px 100px 16%;
  float: left;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;


}

#circ1:hover {
  width: 250px;
  height: 250px;

}

推荐答案

只要使用CSS3。

#circ1:hover {
  -webkit-transform: scale(1.5); 
      -ms-transform: scale(1.5); 
          transform: scale(1.5);
}

此代码将增加div。
for margin

This code will grow divs. for margin

   #circ1:hover + #circ2{
   margin: 100px 0px 100px 8%; 
   }

这篇关于使用CSS在所有方向上增长div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！