Срочно. Появление двух блоков, при наведении на блок2

[kabasik]

Привет дорогой форумчан, мне нужна твоя помощь!

Подскажи пожалуйста как реализовать плавный выезд блок с под другого блока при наведении на него
Вот здесь лежит то что нужно, только мне нужно чтобы еще один блок выезжал налево.

Спойлер

Для просмотра ссылки Войди или Зарегистрируйся

Кто поможет реализовать, скину на пиво.

 

[NoName013]

Вот. <span id="down"> выежает вниз, а <span id="left"> выежает влево.
Фактически дописал только селектор
.right-arrow-grow:hover span#down {
top: 100%; }

<button class="right-arrow-grow">right arrow grow <span id="left">Left</span>
<span id="down">Down</span>
</button>

body {
  margin: 40px auto;
  width: 40%;
  font: 62.5% arial, helvetica, sans-serif;
  text-align: center;
}


button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

  display: inline-block;
  position: relative;
  border: 2px solid black;
  width: 100%;
  height: 3.3333em;
  font-size: 1.2em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 3.3333em;
  vertical-align: middle;
  color: black;
  z-index: 1;
  overflow: hidden;
  background: #eee;
}

/**
* RIGHT-GROW
**/
.right-arrow-grow {
  width: 30%;
  overflow: visible;
  z-index: auto;
  border-right: none;
}

.right-arrow-grow span {
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  z-index: -1;
  width: 100%;
  border: 2px solid black;
  color: white;
  background: black;

  -o-transition: all .5s;
  -ms-transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.right-arrow-grow span:after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  right: -42px;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left-color: black;
}

.right-arrow-grow:hover span#left {
  left: 100%;
}

.right-arrow-grow:hover span#down {
  top: 100%;
}

 

[kabasik]

Вот. <span id="down"> выежает вниз, а <span id="left"> выежает влево.
Фактически дописал только селектор
.right-arrow-grow:hover span#down {
top: 100%; }

<button class="right-arrow-grow">right arrow grow <span id="left">Left</span>
<span id="down">Down</span>
</button>

body {
  margin: 40px auto;
  width: 40%;
  font: 62.5% arial, helvetica, sans-serif;
  text-align: center;
}


button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

  display: inline-block;
  position: relative;
  border: 2px solid black;
  width: 100%;
  height: 3.3333em;
  font-size: 1.2em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 3.3333em;
  vertical-align: middle;
  color: black;
  z-index: 1;
  overflow: hidden;
  background: #eee;
}

/**
* RIGHT-GROW
**/
.right-arrow-grow {
  width: 30%;
  overflow: visible;
  z-index: auto;
  border-right: none;
}

.right-arrow-grow span {
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  z-index: -1;
  width: 100%;
  border: 2px solid black;
  color: white;
  background: black;

  -o-transition: all .5s;
  -ms-transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.right-arrow-grow span:after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  right: -42px;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left-color: black;
}

.right-arrow-grow:hover span#left {
  left: 100%;
}

.right-arrow-grow:hover span#down {
  top: 100%;
}

Спасибо, что дали правильное направление. Запилил. Скиньте в ЛС кошелек

 

[NoName013]

Скинул. Спасибо