Owl Carousel Item not expanding to full Screen with transitions on click

Question

I want to build something like this: Link from Dribbble

I am trying to make an item from the slider expand to full screen like on the video on the link. I have tried using css transitions but they expand inside owl carousel slider and not outside the owl carousel slider.

This is the css I am using:

.transform {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}

.transform-active {
  background-color: #45CEE0;
  height: 100vh;
  width: 100vw;
}

You can fully see what I did on JsFiddle