38928

Make a div grow in all directions with CSS?

Question:

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?

Here is a link to a sitepage: <a href="http://www.somil.site90.net" rel="nofollow">http://www.somil.site90.net</a>

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

Answer1:

Simple, just use CSS3.

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

This code will grow divs. for margin

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

Answer2:

You're very close; you already have the relative positioning. Now all you need to do is move the top left corner of the div up and to the left.

Since the size on hover is 100px larger, you will need to move the div by 50px (half that).

<pre class="lang-css prettyprint-override">#circ1:hover { width: 250px; height: 250px; top:-50px; left:-50px; }

That's all!

Answer3:

See if <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform" rel="nofollow">CSS3 Transforms</a> get you what you want. You'll need some vendor prefixes and, but as long as you're not trying to support IE 8 and under, you should be able to get away with it.

You'll want to use scale. There are also 3D transforms, but they're less supported.

Recommend

  • ConnectionString property has not been initialized
  • IE6 Auto margin works? How is this possible?
  • Qt5 QML ListView contents zoom
  • Set Margins In Excel Using Excel Interop VB.Net
  • MPANDROIDCHART: How to draw X label with .setViewPortOffsets(0,0,0,0)
  • dc.js barChart bars overlapping
  • flexbox margin collapsing between children [duplicate]
  • Chrome and Safari Calculate Margins Incorrectly When Child is Wider Than Parent
  • WPF - Groupbox header alignment
  • wpf Grid best practices
  • Example from three.js but how to implement using SceneKit?
  • Django: nested content blocks with the same name
  • basic.Nack not being processed
  • Elasticsearch: Use a separate index for each language of the same data record
  • dompdf: white margin on A4 page
  • Make line chart with values and dates
  • Local Notifications for Corona SDK (Android)
  • Creating a Logon Screen
  • Attaching a fixed, transparent, header to a ListView?
  • Query a table in different ways or orderings in Cassandra
  • Is it possible to put layout xml's in subdirectories under /res/layout?
  • Grow Animation for Floating Action Button
  • Webgrid not refreshing after delete MVC
  • Jquery UI tool tip close icon
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Bug in WPF DataGrid
  • TFS: Get latest causes slow project reloading
  • Javascript Callbacks with Object constructor
  • How to make Safari send if-modified-since header?
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Traverse Array and Display in markup
  • bootstrap to use multiple ng-app
  • Comma separated Values
  • How to get icons for entities from eclipse?
  • Turn off referential integrity in Derby? is it possible?
  • Qt: Run a script BEFORE make
  • JaxB to read class hierarchy
  • How to load view controller without button in storyboard?