Expand Div from the Middle Instead of Just Top and Left Using CSS

Expand div from the middle instead of just top and left using CSS

The key is to transition the margin by a formula. There is a little "wiggle" that is annoying during the transition if it is floated.

EDITED ADDING OPTIONS

Option 1: Expands within space reserved around it http://jsfiddle.net/xcWge/14/:

#square {
    width: 10px;
    height: 10px;
    margin: 100px; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
    margin: 55px; /* initial margin - (width change (and/or height change)/2), so here 100px is initial margin, and the change is (100px final W/H - 10px initial W/H = 90px change, so 100px - (90px / 2 [= 45px]) = 55px) */
}

Option 2: Expands over elements around it http://jsfiddle.net/xcWge/18/:

#square {
    width: 10px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    margin: -50px; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}

Option 3: Expands over elements before it in flow and shifts elements after it http://jsfiddle.net/xcWge/22/:

#square {
    width: 10px;
    height: 10px;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    top: -50px; /* initial top[0] - (new height[110px] - initial height[10px] [=100px])/2 [=50px] = -50px) */
    left: -50px; /* initial left[0] - (new width[110px] - initial width[10px] [=100px])/2 [=50px] = -50px) */
    margin-right: -50px;
    margin-bottom: -50px;
}

ADDED NON-SQUARE EXAMPLE

A comment was made this does not work for a non-square (same width/height), but that just means one has to adjust differently for each direction during the transition. So here is Option 2 (with non-square) that starts as a rectangle, and the width expands twice as much as the height (so changes rectangle shape even) during the transition: Expands over elements around it http://jsfiddle.net/xcWge/2131/

#rectangle {
    width: 110px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#rectangle:hover {
    width: 310px;
    height: 110px;
    margin: -50px -100px; /* initial margin - ((initial margin - width change (or height change))/2) */
}

If the width were only changing by 100px also (so from 110px to 210px), then just a margin: -50px would have still worked.

expand div from middle, but unequal widths to each side?

<edit>last fiddle update </edit>

If,

boxes are always same size
not too many
always 4 on each row

You can set a negative margin either way:

dispatch a different class (3 or 4) to your boxes
or use nth-child(n) in css file

DEMO with nth-child(n) method (demo updated with transition)

#icon:nth-child(2):hover #info, #icon:nth-child(6):hover #info {
    margin-left:-170px;
}
#icon:nth-child(3):hover #info, #icon:nth-child(7):hover #info {
    margin-left:-350px;
}
#icon:nth-child(4n):hover #info {
    margin-left:-530px;
}

More boxes ? , update selectors or it might be time to uses class.

expand div from middle

If flexbox is an option, you can just add display: flex to the body - see demo below:

zoom = value => {  let size = value;  return {    up: () => {      size += 10;      holder.style.height = `${size}%`;      holder.style.width = `${size}%`;    },    down: () => {      size -= 10;      holder.style.height = `${size}%`;      holder.style.width = `${size}%`;    }  }}zoom = zoom(100);
document.onmousewheel = event => {  (event.wheelDelta > 0) ? zoom.up(): zoom.down();}

body {  background-color: rgb(33, 37, 43);  align-content: center;  overflow: hidden;  display: flex; /* ADDED */  height: 100vh; /* initial height*/}
#holder {  height: 100%;  width: 100%;  margin: auto;  background: url("http://placehold.it/100x100") no-repeat center/contain;}

<div id="holder" />

How to have a div expand to left and right?

You could use a container with text-align:center; like so:

HTML

<div class="container">
    <div id="photo"></div>
</div>

CSS

.container{
    text-align: center;    
}
#photo{
    min-width: 180px;
    max-width: 320px;
    height: 180px;
    border: 1px solid black;
    display: inline-block;
    text-align: left;
    margin-top: 50px;
}

Example fiddle

Expanding absolute div from center to reveal child

#1 – Using clip-path

Compatibility: All modern browsers apart from Edge. IE10/11 and Edge provide limited support using url() only.

Example with clip-path

To crop the image, use clip-path: inset(). In this example, we have a 120 pixel box that is reduced to 0 on hover.

.reveal {  background: url(https://i.stack.imgur.com/3v1Kz.jpg) no-repeat;  background-size: 150px;  background-position: center;  height: 300px;  width: 300px;  clip-path: inset(120px 120px 120px 120px);  transition: clip-path 0.5s;}
.reveal:hover {  clip-path: inset(0 0 0 0);}
/*for example*/body {  background: linear-gradient(to bottom right, black 0%, white 100%);  height: 100vh;}

<div class="reveal"></div>

CSS: How to scale an image from the center instead of top-left

Just replace width: 400px; with transform: scale(2,2) on :hover.

img {    width: 100%; max-width: 100%;}div {    position: absolute; left: 20%; top: 20%;    width: 250px;    transition: all 2s ease-in-out;}div:hover {    transform: scale(2,2)}

<div>    <a href="http://photobucket.com/images/cat" target="_blank">        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>    </a></div>

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

Fixed Left: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>

Expand div from parent div to center viewport

If what you want to do is make the .growme box grow from the center of the .box box, instead of from the center of the screen, what you need to do is to reset its position each time that you are going to open it.

How to do that? Calculate the position of the .box element within the viewport by using offset() (to obtain the position of .box within the document) and scrollTop() (to get the value of the scrollbars). In pseudocode, it would be something like this:

position = element_height + element_offset - window_scroll

Once you have that, it is really simple:

Update the CSS for .growme so the box is initially in the horizontal center:

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: fixed;
    opacity: 0;
    top:0;
    left:50%;
    margin:0;
}

Get the target position for .growme (with the formula above):
```
100 + $(this).offset().top - $(window).scrollTop()
```

Place .growme in the target position.

$(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"});

Animate .growme so it goes to the top-left corner and its width and height occupy 100%.

$('.growme').animate({
        width: '100%',
        height: '100%',
        left:0,
        top:0,
        opacity: 1,
    }, 'normal');

And that should do the trick (for the shrinking process, you'd need to calculate the target top for the animation, see the code below). Here is the code (I commented the overflow:hidden part to avoid the resize of the viewport when the scrollbars disappear):

$('.box').on('click', function () {
  // set the .growme div at the center of the .box div  $(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"});
  //$('body').css('overflow', 'hidden');    $('.growme').animate({    width: '100%',    height: '100%',    left:0,    top:0,    opacity: 1,  }, 'normal');});
$('.growme').on('click', function () {    // calculate the target goal for the top position  var goal = (100 + $(".box").offset().top - $(window).scrollTop()) + "px";    $(this).animate({    width: 0,    height: 0,    left:"50%",    top: goal,    opacity: 0,  }, 'normal', function(){    //$('body').css('overflow', 'auto');  });});

.growme {  background-color: #990000;  height: 0;  width: 0;  position: fixed;  opacity: 0;  top:0;  left:50%;  margin:0;}.box {  margin: 0 auto;  height: 200px;  width: 300px;  background-color: #999;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="growme">test</div><p>adsadsad</p><p>adsadsad</p><p>adsadsad</p><div class="box"><h3>click me</h3></div><p>adsadsad</p><p>adsadsad</p><p>adsadsad</p><p>adsadsad</p><p>adsadsad</p>

CSS Transition Width div box to expand to the left when mouse hovers over it

transition:width 2s;
transition:left 2s;
transition:bottom 2s;

You are overwriting the transition property here two times, so that only the last value finally “survives”.

You have to put all three values you want to animate into one transition property,

transition:width 2s, left 2s, bottom 2s;

Expand Div from the Middle Instead of Just Top and Left Using CSS