[SuperZen]

<style>
  .html,
  .body {
    height: 100%;
  }

  .container {
    display: flex;
    flex-direction: row;
    padding-left: 10em;
  }

  .item-wrapper {
    display: flex;
    flex: 1;
    position: relative;
    min-height: 10em;
    margin: 1em;
  }

  .item {
    width: 100%;
    min-height: inherit;
    background-color: red;
  }

  .item-info-left {
    display: none;
    position: absolute;
    left: -5em;
    width: 5em;
    min-height: 15em;
    background-color: blue;
  }

  .item-wrapper:hover .item-info-left,
  .item-wrapper:hover .item-info-bottom {
    display: block;
  }

  .item-info-bottom {
    display: none;
    position: absolute;
    bottom: -5em;
    height: 5em;
    width: 100%;
    background-color: green;
  }
</style>

<div class="container">
  <div class="item-wrapper">
    <div class="item"></div>
    <div class="item-info-left">info-left</div>
    <div class="item-info-bottom">info-bottom</div>
  </div>
  <div class="item-wrapper">
    <div class="item"></div>
    <div class="item-info-left">info</div>
    <div class="item-info-bottom">info-bottom</div>
  </div>
  <div class="item-wrapper">
    <div class="item"></div>
    <div class="item-info-left">info</div>
    <div class="item-info-bottom">info-bottom</div>
  </div>
</div>

конечно, далеко не верстальщик...) идея примерно такая...

конечно все самому писать