'Transition between absolute placement workaround

I know transitioning between position: absolute; and position:relative; is impossible, but I really want to achieve a certain effect and need a workaround.

Basically: I have a series of buttons in a grid, so their position changes when scrolling. When I click the button, I want the button to grow and fill almost the entire screen, no matter from where it has to start.

this is the CSS for the standard buttons:

.projects .project__button {
  border: var(--color-1) solid .2rem;
  padding: 1rem;
  border-radius: 3rem;

  color: var(--color-1);

  font-size: 1.5rem;

  cursor: pointer;

  transition: color .2s ease-out, background-color .2s ease-out;
}
.projects .project__button:hover {
  color: white;
  background-color: var(--color-1);
}

And this is the CSS for the button when clicked:

.project .project__button.project__details {
  position: absolute;
  top: 10vh;
  left: 10vw;

  z-index: 10;

  height: 80vh;
  width: 80vw;

  background-color: white;
}

Is there a workaround to achieve this effect with a transition? In other words: I need the position to be absolute without using the position property. Is this possible?

css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions