Как установить меньшую ширину, когда один элемент находится поверх другого, а нижний выдвигается при наведении?

Question

У меня есть один div поверх другого.При наведении нижний элемент div (правая серая полоса) выдвигается и имеет ту же ширину, что и верхний элемент div: http://d.pr/OB6N. Я пытаюсь создать сетку изображений с выдвижными элементами.Есть ли способ установить ширину так, как показано на рисунке?Потому что прямо сейчас, когда я проверяю элемент, ширина - это сумма верхнего div и выдвижного div (когда он полностью выдвинут).

 HTML:
    <div class="poster">
     <img src="example.png" />
    </div>
    <div class="bottombox"></div>

CSS:

.poster {
    float: left;
    width: 250px;
    height: 375px;
    display: inline-block;
    position: relative;
    left: 0px;
    z-index: 1;
    -webkit-transition-duration: 0.2s;
}

.bottombox {
    float: left;
    width: 250px;
    height: 375px;
    display: inline-block;
    position: relative;
    left: -225px;
    -webkit-transition-duration: 0.2s;
}

.bottombox:hover {
    left: 0px;
}

Надеюсь, что это имеет смысл.Спасибо!

Answer 1

Так что вам будет гораздо легче помочь, если вы создадите jsfiddle для игры.Тем не менее, один из подходов состоит в том, чтобы сделать .bottombox дочерним элементом элемента .poster

<div class="poster">
  <img src="example.png" />
  <div class="bottombox"></div>
</div>

, затем изменить CSS-код .poster на

width: auto

и изменить CSS-файл .bottombox

width: 100%;
position: absolute;
left: 25px;

и в последний раз установите определение наведения на

left: 100%;