CODEWITHSUNDEEP
jqueryhtmlcss
Tibi Buzdugan
Tibi Buzdugan

Reputation: 82

How can I enlarge a div element from it's center when using 'position: fixed' ?

I have a fixed size div element within a list of div tags (100% width, used on mobile website). Upon click, I want to make it full screen, so I add a class to it with the following properties: height: 100vh; width: 100%; position: fixed; top: 0px; left: 0px; transition: all 0.5s ease-in-out;.

The problem is that the css transformation starts from the origin of the fixed position (top left corner).

How can I make the transition effect from the fixed size to 100% w/h so that the css transformation will occur from the center of the element, pushing the other elements from the sideways (up/down)?

Without position:fixed; top:0px; left:0px; the transformation occurs naturally (from the div's center), but it only pushes the following elements down and do not center the screen on the full screen div.

Upvotes: 1

Views: 642

Answers (2)

musafar006
musafar006

Reputation: 989

add these under .banner {}

position: absolute;
left: 50%;
transform: translateX(-50%);

and these under #banner.zoom {}

transform: translateX(0);

here is the JSFiddle

Upvotes: 0

Rayon
Rayon

Reputation: 36609

Use css zoom property

The zoom property in CSS allows you to scale your content

var zoomFactor = 100;

function largeMe() {
  zoomFactor += 10;
  console.log(document.getElementById('center'));
  document.getElementById('center').style.zoom = zoomFactor + "%";
}

function smallMe() {
  zoomFactor -= 10;
  console.log(document.getElementById('center'));
  document.getElementById('center').style.zoom = zoomFactor + "%";
}
#center {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: #FFF;
  padding: 10px;
  border: 5px solid #CCC;
  z-index: 200;
  margin: 5% auto;
  left: 0;
  right: 0;
}
<center id='center'>
  ...elements
</center>
<button type='button' onclick='largeMe()'>
  Zoom In
</button>

<button type='button' onclick='smallMe()'>
  Zoom Out
</button>

Fiddle here

Upvotes: 1

Related Questions