How make a diagonal transition?

Question

Can anybody body give me idea about how make a transition like this?

A:

B:

The main goal is Div A's and div B's content should LOOK fix in their positions.

I update pictures and this is fiddle (not complete)

ALL I WANT IS THIS: consider two div stacked and a diagonal line that move from top left screen to bottom right and top of this line is Div A' and bottom of this line is Div B

        $('#menu-show').on('click',function(){
            $('#menu-wrapper,#menu-show,#menu-container').addClass('visible');
        });

#menu-show {
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    background-image: url(/Content/img/menu-show.png);
    background-repeat: no-repeat;
    z-index: 299;
    cursor: pointer;
    transition: all 1s 0.1s;
}

    #menu-show.visible {
        -moz-transform: translate(50%,50%);
        -ms-transform: translate(100%,100%);
        -o-transform: translate(100%,100%);
        -webkit-transform: translate(100%,100%);
        transform: translate(100%,100%);
    }

#menu-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: -100%;
    left: -100%;
    z-index: 220;
    background-image: url(/Content/img/home/map1.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 1s 0s;
}

    #menu-container.visible {
        top: 0%;
        left: 0%;
    }

#menu-wrapper {
    position: fixed;
    top: -200%;
    left: -200%;
    background: blue;
    z-index: 200;
    width: 200%;
    height: 300%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: -webkit-transform 1s .4s;
    transition: transform 1s .4s;
    transition: transform 1s .4s,-webkit-transform 1s .4s;
}

    #menu-wrapper.visible {
        -webkit-transform: translate(60%,50%) rotate(-45deg);
        transform: translate(60%,50%) rotate(-45deg);
        transition-delay: 0s;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
   Consider this as div b that have content click top left area for transition!!!
  </div>
  <div  id="menu-show"></div>
    <div id="menu-wrapper">
      this is contents
    </div>
    <div id="menu-container" style="margin:100px auto;">this content should be fix not moving</div>

Answer 1

You could use :after pseudo-element as overlay and change its position on hover. Important part is overflow: hidden on .element.

.element {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}
.element:after {
  content: '';
  background: black;
  width: 200%;
  height: 200%;
  position: absolute;
  left: -80px;
  top: 0;
  transform: rotate(-40deg);
  transition: all 0.3s ease-in;
}
.element:hover:after {
  left: 200px;
}

<div class="element">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non aut, quisquam iusto eaque nobis perferendis ad quos, laudantium laboriosam nostrum quibusdam, illo ea inventore quidem!
</div>

You can also use transform: translateY() on hover to change position of :after

.element {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}
.element:after {
  content: '';
  background: black;
  width: 200%;
  height: 200%;
  position: absolute;
  left: -80px;
  top: 0;
  transform: rotate(-40deg);
  transition: all 0.3s ease-in;
}
.element:hover:after {
  transform: rotate(-40deg) translateY(150px);
}

<div class="element">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non aut, quisquam iusto eaque nobis perferendis ad quos, laudantium laboriosam nostrum quibusdam, illo ea inventore quidem!
</div>