CSS过渡左/右不起作用

Question

我将在前言中提到我不是CSS专家，但我无法弄清楚为什么这不起作用。当我将鼠标悬停在容器的左右两侧时，我想让包含图像的DIV左右滑动。滑动工作正常，但过渡不...

HTML：

<div class="event-pics-container">
     <div class="slide slide-left"></div>
     <div class="slide slide-right"></div>
     <div class="event-pics-area" ng-show="eventImages.length">
         <div ng-repeat="pic in eventImages">
             <img src="{{pic.EncodedAbsUrl}}" alt="{{pic.Title}}" title="{{pic.Title}}" ng-click="siteProps.EventLogo = pic.EncodedAbsUrl">
         </div>
     </div>
</div>

CSS：

.event-pics-container{
   position:relative;height:100px;width:100%;background-color:black;overflow:hidden;
}
.event-pics-container .slide{
   position:absolute;top:0px;z-index:1000;height:100%;width:30px;background-color:rgba(255,255,255,0.5);
}
.event-pics-container .slide-left{
   left:0px;
}
.event-pics-container .slide-right{
   right:0px;
}
.event-pics-container .slide-left:hover + .event-pics-area{
   -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
   left:0px;
}
.event-pics-container .slide-right:hover + .event-pics-area{
   -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
   right:0px;
}
.event-pics-area{
   position:absolute;height:100px;white-space:nowrap;
}
.event-pics-area > div{
height:100px;width:100px;display:inline-block;overflow:hidden;position:relative;
}
.event-pics-area img{
   height:100%;cursor:pointer;
}