CODEWITHSUNDEEP
htmlcss
CAJ69I
CAJ69I

Reputation: 261

Transition to full Window (not screen)

I have a report page, where I have my menus, my headers, footers, etc. However I would like to have an option that the report content can be enlarged to full window size (not full screen) with a transition. I'm experimenting with this example:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover

My main problem is I can't make it transition the movement too, not just the enlargement. It instantly jumps to the top left corner without any transition, while the 100% width and 100% height transition works.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

.zoom {
    background-color: green;
    width: 200px;
    height: 200px;
    margin: auto;
}

.zoom:hover {
  transition: all 1s;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>

<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
  
<div class="zoom"></div>

</body>
</html>

I've been searching for a solution, however most of the results are regarding full screen, and not full window.

Upvotes: 3

Views: 78

Answers (2)

Temani Afif
Temani Afif

Reputation: 272806

The issue is that you are changing the position to fixed and your top/left values are immediately considering thus the jump. Also I don't think there is a CSS solution to have a transition from the static position to the fixed position by specifying top/left only on hover. The rule of transtion is to have an initial value and a final value.

An idea here is to rely on some JS in order to set a the intial value of top/left values and allow the transition to work fine:

function getPosition(element) {
  var xPosition = 0,
    yPosition = 0;

  while (element) {
    xPosition += (element.offsetLeft + element.clientLeft);
    yPosition += (element.offsetTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
    y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
  };
}
var e=document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left=pos.x+ 'px';
e.style.top=pos.y + 'px';
* {
  box-sizing: border-box;
}

.zoom {
  background-color: green;
  width: 200px;
  height: 200px;
  margin: auto;
}

.zoom:hover {
  transition: all 1s;
  top: 0!important;
  left: 0!important;
  position: fixed;
  width: 100%;
  height: 100%;
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>

<div class="zoom"></div>

To be more accurate you need to adjust the values on the window scroll and window resize:

function getPosition(element) {
  var xPosition = 0,
    yPosition = 0;

  while (element) {
    xPosition += (element.offsetLeft + element.clientLeft);
    yPosition += (element.offsetTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
    y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
  };
}
var e = document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';

window.addEventListener('scroll', function() {
  var pos = getPosition(e);
  e.style.left = pos.x + 'px';
  e.style.top = pos.y + 'px';
});
window.addEventListener('resize', function() {
  var pos = getPosition(e);
  e.style.left = pos.x + 'px';
  e.style.top = pos.y + 'px';
});
* {
  box-sizing: border-box;
}

.zoom {
  background-color: green;
  width: 200px;
  height: 200px;
  margin: auto;
}

.zoom:hover {
  transition: all 1s;
  top: 0!important;
  left: 0!important;
  position: fixed;
  width: 100%;
  height: 100%;
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>

<div class="zoom"></div>

Upvotes: 1

Chaska
Chaska

Reputation: 3205

By default the position property of .zoom is static, transition is not able to handle change of display type.

So you may need to set position: absolute; for .zoom and preset the position.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

.zoom {
    position: absolute;
    top: 120px;
    left: 120px;
    background-color: green;
    width: 200px;
    height: 200px;
}

.zoom:hover {
  transition: all 1s;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>

<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
  
<div class="zoom"></div>

</body>
</html>

Upvotes: 2

Related Questions